精华内容
下载资源
问答
  • 项目是从Vue2迁移的, 之前Vue2一直用的addRoutes, 升级到3之后报错 <p style="text-align:center"><img alt="" height="188" src="https://img-ask.csdnimg.cn/upload/1618885425686.png" width="732" /></p> <p>...
  • P13.7-VueRouter动态路由

    2020-12-25 17:11:33
    P13.7-VueRouter动态路由 文章目录P13.7-VueRouter动态路由1.概述2.配置动态路由2.1.创建用户组件2.2.配置动态路由2.3.使用动态路由2.4.预览效果3.$route获取当前活跃路由的参数 1.概述 在某些情况下,一个页面的...

    P13.7-VueRouter动态路由

    1.概述

    • 在某些情况下,一个页面的path路径可能是不确定的,比如我们常见的登录页面。
    • 当登录成功后,URL路径是这样:http://myweb/login/userid=123
    • userid后面123,这个数字是每个用户的ID,是不确定的。这个时候我们就需要用到动态路由,动态显示每个用户的ID

    2.配置动态路由

    2.1.创建用户组件

    在components中创建User.vue组件,该组件内容如下。

    • 1.User.vue组件结构图
      在这里插入图片描述
    • 2.User.vue代码
    <template>
      <div>
       <h2>我是用户界面</h2>
       <p>用户相关信息</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'User'
    }
    </script>
    
    <style>
    
    </style>
    

    2.2.配置动态路由

    在router文件夹下配置index.js文件添加User组件路由

    • 1.配置User组件动态路由截图

    在这里插入图片描述

    • 2.配置User组件动态路由代码
    // ---------------配置路由信息-------------
    
    // 导入router模块
    import VueRouter from 'vue-router'
    // 导入 Vue模块
    import Vue from 'vue'
    
    
    // 4.1.导入组件模块
    import Home from '../components/Home'
    import About from '../components/About'
    import User from '../components/User'
    
    // 1.安装router插件:通过vue.use
    Vue.use(VueRouter)
    
    // 2.创建VueRouter对象
      // 配置路由和组件之间的映射关系表
    const routes = [
      // 4.2.配置组件路由映射表
        // 配置默认路由
      {
        // A默认路由缺省状态下也就是项目根路径情况
        path: '/',
        // B重定向到指定的地址
        redirect: '/home'
      },
      {
        path: '/home',
        component: Home
      },
      {
        path: '/about',
        component: About
      },
      {
        // 不确定的动态的路径用冒号+自定义路径名称方式作为占位符,最后用获取到实际的路径地址会替换这个占位符。
        path: '/user/:userId',
        component: User
      }
    ]
    
    const router = new VueRouter({
      // 使用配置路由和组件之间的映射关系表
      routes,
      mode: 'history',
        // 修改router-link-active名称为我们自定义的名称
      linkActiveClass: 'active'
    })
    
    // 3.将router对象挂载到Vue实例,才会真正使用router对象
    export default router
    

    2.3.使用动态路由

    • 1.在App.vue中添加data模拟服务器接口返回的用户ID

    在这里插入图片描述

    • 2.在App.vue中添加用户router-link

    配置用户的router-link 读取data返回的userId,并将读取到的userId放到url中。

    在这里插入图片描述

    • 3.配置用户router-link完整代码
    <template>
      <div id="app">
        <!-- 使用router路由配置 -->
        <!-- <router-link to="/home" tag="button" replace >首页</router-link>
        <router-link to="/about" replace >关于</router-link> -->
    
        <!-- 1.将首页和关于设置成两个按钮,并绑定homeClick和aboutClick方法 -->
        <!-- <button @click="homeClick">首页</button>
        <button @click="aboutClick">关于</button> -->
        <!-- 显示指定路由对应的组件内容 -->
    
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <!-- 动态获取data中userID变量的值,替换index.js中:userId占位符,注意to属性前面有个冒号是v-bind简写作用是动态获取data中属性值。 -->
        <router-link :to="'/user/'+userId">用户</router-link>
    
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data() {
        return {
          // 这个userId变量不需要和index.js中动态路由配置的userId名称一致
          userId: '钱国强',
          imgURL: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1612138888,1794405442&fm=26&gp=0.jpg'
        }
      },
      methods: {
        homeClick() {
          // 2.通过$router对象调用push方法跳转到指定的路由
          this.$router.push('/home');
          console.log('homeClick');
        },
        aboutClick() {
          this.$router.push('/about');
          console.log('aboutClick');
        }
    
      }
    }
    </script>
    
    <style>
      .active{
        color: #f00
      }
    </style>
    
    

    2.4.预览效果

    • 1.启动项目
    #进入项目根路径
     cd .\01-learnvuerouter\
    
    #启动项目
    npm run dev
    
    • 2.预览效果

    在这里插入图片描述

    3.$route获取当前活跃路由的参数

    通过$route对象可以获取当前所点击路由组件的信息。从这个组件中获取我们需要的数据。

    • 1.获取User用户ID
    <template>
      <div>
       <h2>我是用户界面</h2>
       <p>用户相关信息</p>
       <!-- 展示获取到用户的名称 -->
       <h2>{{userId}}</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: 'User',
      computed: {
        userId() {
          // $route获取index.js中动态配置的User组件的:userId
          return this.$route.params.userId
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    
    • 2.预览效果
      在这里插入图片描述
    展开全文
  • vue动态路由

    2019-12-19 12:10:49
    1.安装 npm install vue-router --save 2.引入路由(main.js) import VueRouter from...3.配置路由 创建组件引入组件 定义路由 实例化VueRouter 挂载 例子: main.js // The Vue build version to load...

    1.安装

    npm install vue-router --save

    2.引入路由(main.js)

    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

    3.配置路由

    • 创建组件引入组件
    • 定义路由
    • 实例化VueRouter 
    • 挂载

    例子:

    main.js

     // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    //import VueResource from 'vue-resource'
    import VueRouter from 'vue-router'
    Vue.config.productionTip = false
    //Vue.use(VueResource)
    Vue.use(VueRouter)
    
    //1. 创建组件
    
    import ccc from "./components/ccc.vue";
    import ddd from "./components/ddd.vue";
    import detail from "./components/detail.vue";
    import goods from "./components/goods.vue";
    // 2.配置路由
    
    const routes=[
      {path:'/ccc',component:ccc},
      {path:'/ddd',component:ddd},
      {path:'/detail/:id',component:detail},
      {path:'/goods',component:goods},
      {path:'*',redirect:'/ccc'}
    ]
    
    //3.实例化VueRouter
    const router=new VueRouter({
      routes
    })
    
    //4.挂载路由
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      render:h=>h(App),
      components: { App },
      template: '<App/>'
    })
    

    ccc.vue

    <template>
      <div>
        我是ccc
        <ul>
          <li v-for="(item,key) in list">
            <router-link :to="'/detail/'+key">{{key}}--{{item}}</router-link>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          list: ["000", "111", "222"]
        };
      },
    };
    </script>
    <style scoped>
    </style>

    detail.vue

    <template>
        <div id="detail">
            
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                
            }
        },mounted(){
            console.log(this.$route.params)//得到点击用户的id,此处是点击用户的key值
        }
    }
    </script>
    <style scoped>
    
    </style>

    页面路径:

    console.log得结果:

     

    ddd.vue

    <template>
        <div>
            我是ddd
            <ul>
          <li v-for="(item,key) in list">
            <router-link :to="'/goods?aid='+key">{{key}}--{{item}}</router-link>
          </li>
        </ul>
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                list:['商品000','商品111','商品222']
            }
        }
    }
    </script>
    <style scoped>
    
    </style>

    goods.vue

    <template>
        <div id="goods">
            
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                
            }
        },mounted(){
            console.log(this.$route.query)//获取点击的用户的aid,此处id就是当前点击的key值
        }
    }
    </script>
    <style scoped>
    
    </style>

    页面路径:

    console.log结果:

     

    展开全文
  • 最大的坑是在配置3级侧边栏动态路由。我们必须在二级路由界面添加<router-view />。这个问题耗时5个小时,最后还是在我师傅的帮助下解决。 路由js文件 { path: '/loginHome', component: Layout, name: '...

    title: VueRouter 动态路由配置的坑
    tags:

    • router
    • dynamic

    VueRouter 动态路由配置的坑

    • 最大的坑是在配置3级侧边栏动态路由。我们必须在二级路由界面添加<router-view />。这个问题耗时5个小时,最后还是在我师傅的帮助下解决。

    路由js文件

      {
        path: '/loginHome',
        component: Layout,
        name: 'LoginHome',
        redirect: '/loginHome/login',
        meta: { title: 'LoginHome', icon: 'Login' },
        children: [{
          path: 'login',
          name: 'login',
          component: () => import('@/views/loginHome/login/index'), // Parent router-view
          meta: { title: 'Login' },
          children: [{
            path: '/show',
            name: 'Show',
            component: () => import('@/views/loginHome/login/show/index'),
            meta: { title: 'Show' }
          }, {
            path: '/code',
            name: 'Code',
            component: () => import('@/views/loginHome/login/code/index'),
            meta: { title: 'Code' }
          }]
        }]
      }
    

    二级路由页面模板

    <template>
      <div class="my_main">
        <router-view />
      </div>
    </template>
    <style scoped>
    .my_main{
      width: 100%;
      height: 100%;
    }
    </style>
    
    
    展开全文
  • 很多时候我们在项目的路由都是在前端配置好的 但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染。不用在前端配置。 下面主要讲一下思路 1、和后台小哥哥沟通好数据,把...3、把后台提供的数据处
  • vue 动态路由

    2021-01-20 12:34:39
    1.新建路由 User.vue 这是用户信息界面 {{$route.params.userId}} export default { name: User } ...2.配置路由映射 ... component: () => import(/* webpackChunkName...3.在app.vue中使用 Home | About |
  • 前面讲了Vue2项目中动态添加路由及生成菜单,今天尝试在Vue3中动态添加路由及生成菜单。最近在尝试用Vue3开发个管理平台项目,一切都是从头开始,...动态路由不生效,查了很多资料,最后发现,Router4中,去掉了 rou...

    前面讲了Vue2项目中动态添加路由及生成菜单,今天尝试在Vue3中动态添加路由及生成菜单。

    最近在尝试用Vue3开发个管理平台项目,一切都是从头开始,基本框架搭建,熟悉Vue3写法,编写登录页,编写路由守卫,上面功能已基本完成,开始编写首页布局,用Vue3就必须用Router4.x版本,所以之前的代码迁移过来之后发现,动态路由不生效,查了很多资料,最后发现,Router4中,去掉了 router.addRoutes ,只能使用 addRoute 

    6df9a0b0593190d5f63d9674c5ff2257.png

    所以之前的写法就要相应的调整,之前是可以动态添加更多的路由规则,参数必须是一个符合 routes 选项要求的数组。

    router.addRoutes(routesArray<RouteConfig>);

    现在是只能添加一个

    router.addRoute("名称", {
      path: `/index`,
      name: '首页',
      component: () => import(`@/index.vue`)
    });

    接下来就详细说明

    1 路由数据封装

    前台把路由写在代码里,这种方式只适用部分情况,所以大部分情况是路由后台提供,比如返回格式如下:

    {
        "code"0,
        "msg""success",
        "data": [{
            "id"1000,
            "parentId"-1,
            "icon""iconquanxian",
            "name""组织架构",
            "path""/system",
            "component""Layout",
            "redirect"null,
            "type""0",
            "children": [{
                "id"1100,
                "parentId"1000,
                "children": [],
                "icon""iconyonghuguanli",
                "name""用户管理",
                "path""/user",
                "component""views/system/user/index",
                "redirect"null,
                "type""0",
            }],

        }, {
            "id"2000,
            "parentId"-1,
            "icon""iconquanxian",
            "name""权限管理",
            "path""/organization",
            "component""Layout",
            "redirect"null,
            "type""0",
            "children": [{
                "id"2100,
                "parentId"2000,
                "children": [],
                "icon""iconyonghuguanli",
                "name""菜单管理",
                "path""/menu",
                "component""views/system/user/index",
                "redirect"null,
                "type""0",
            }],

        }]
    }

    这种是后台树型结构返回,前台不需要进行二次处理可以直接显示成菜单,

    <a-menutheme="dark"mode="inline"
    >

      <a-sub-menu v-for="subitem in menuData.menu" :key="subitem.path">
        <template #title>
          <Icon-font :type="subitem.icon" />
          <span>{{ subitem.name }}span>
        template>
        <a-menu-item v-for="item in subitem.children" :key="item.path">{{
          item.name
        }}a-menu-item>
      a-sub-menu>
    a-menu>

    但是路由需要重新封装,先说说用到的字段,path-路由地址、component这个现在有两种,一种是Layout代表父菜单,另一种views开头的是组件地址。那么我们就可以开始动态生成路由了,写法和Vue2项目有所不同,首先定义一个方法,

    const routerPackag = routers => {
      routers.filter(itemRouter => {
        if (itemRouter.component != "Layout") {
          router.addRoute("BasicLayout", {
            path`${itemRouter.path}`,
            name: itemRouter.name,
            component() => import(`@/${itemRouter.component}`)
          });
        }
        // 是否存在子集
        if (itemRouter.children && itemRouter.children.length) {
          routerPackag(itemRouter.children);
        }
        return true;
      });
    };

    2 调用

    上面这个方式是动态生成路由,接下来就是调用这个方法。

    getBasisMenu().then(res => {
      if (res.code == 0) {
        routerPackag(res.data);
      }
    });

    3 效果

    动态路由实现了,但是现在还有部分问题未解决

    4478a8df9a8eeaf2d3b331a005870079.gif

    代码在gitee上,可以直接运行。

    展开全文
  • vue动态路由

    2020-10-16 15:59:55
    动态路由 有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件,而是把它们都映射到同一个组件,同时 ...
  • 动态路由1 //1.创建组件 import Content from ‘./components/Content.vue’; //2.配置路由 注意:名字 const routes = [ { path: '/content/:aid', component: Content }, /*动态路由*/ ]` 3.在对应的显示的页面 ...
  • 3. Vue 动态路由匹配

    2020-06-13 13:14:36
    Vue 动态路由匹配 动态路由匹配可通过URL进行参数的解析 <div id="app"> <p> <router-link :to="/user/+user_id">get user id</router-link> </p> <router-view></...
  • Vue.js路由 -- 动态路由

    2020-05-31 17:15:43
    文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params 动态路由 有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能...
  • 在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一。在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明: 基本使用 1 { 2...
  • 2、将后端返回的json数据动态添加到当前路由中。 3、菜单组件获取store中的数据来渲染菜单。 后端JSON保存 使用mockjs,模拟直接返回json报文 main.js 引入mock //mock测试引入 import './mock/mock.js' 配置请求...
  • Vue 如何根据路由动态生成界面这两天有这么一个需求,需要根据路由动态生成界面,这个在前后端不分离的项目中应该很容易实现,但是在vue中就需要好好思考一下了。看了一些资料,最终还是实现了这个功能, 思路如下:...
  • 简介 路由就是一套映射规则,当...在 components 目录下构造 3vue视图组件 One.vue Two.vue Three.vue 第三个组件与 HelloWorld 同级,而前两个组件为 HelloWorld 的子路由 src/components/One.vue <templat
  • 想要实现伪静态,路径后面加上 .html 后缀,可以通过动态路由来实现。 首先在你想要实现伪静态的页面的路由规则中配置,如: { path: "/Detail/:id", name: "Detail", compontent: ...... } 这里是给 Detail 这...
  • vue-router 动态路由

    2020-10-05 08:11:55
    文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params 动态路由 有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能...
  • 路由进阶 - 动态路由 核心功能 路由传参 路由接参 动态路由: url中路由是改变的,但是改变路由公用一个组件 举例: localhost:3000/detail/001?a=1&b=2 localhost:3000/detail/002?a=2&b=3 detail ...
  • 1.mvvmm:module,v:viewvm:viewmodule2.vue,react,angular的区别vue,react数据驱动,组件化,vue,angular:双向绑定vue,react,angular:虚拟domangular:模块化开发。react:mvcvue,angular:mvvmangular:有脏检查。3.v-...
  • Vue动态路由以及Get传值1.不同路由传值:动态路由1.配置动态路由2.获取动态路由的值3.实例2.Get方法传值 1.不同路由传值:动态路由 1.配置动态路由 routes:[ //动态路径参数 以冒号开头 { path: '/user/:id', ...
  • vue路由动态加载

    2017-07-25 17:07:00
    注意:是动态加载不是动态路由 解决的问题: 动态配置菜单栏的路由参数--实现菜单级的权限控制 问题成因:  在vue实例化的时候vuex、vue-router 就需要加载完毕,无法使用异步的方式从服务器获取带权限的菜单路由. ...
  • 1.安装 npm install vue-router --save / cnpm install vue-router --save 2、引入并 Vue.use(VueRouter) (main.js) import VueRouter from 'vue-router' ... 3、配置路由 1、创建组件 引入组件 2、...
  • 文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params 动态路由 有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能...
  • 目前在使用VUE3.X开发,发现加载动态路由的话,由于刷新页面就会重新加载VUEX,故会丢失已存在的state,但是又不想localStorage,sessionStorage。 经过多次试验,采取在权限验证里面的路由守卫里,添加 检测如果...
  • 前端路由:3.1 概念与本质:二、vue-router的基本使用:三、vue-router嵌套路由:四、vue-router动态路由匹配:五、vue-router命名路由:六、vue-router编程式导航:七、基于vue-router的案例: 一、路由的基本概念: ...
  • 一、动态路由适用于什么场景 比如写用户的信息页面时,页面的结构都一样,只是用户的名称不一样,这个时候就可以使用动态路由 二、下面写个小案例 1、创建用户管理页面testRouter3.vue <template> <div>...
  • Vue动态替换路由-Url参数

    千次阅读 2020-04-28 16:05:38
    动态替换和修改URL的参数,可使用webpack-merge包来完成。 1、安装webpack-merge npm install webpack-merge --D 2、引入包 import merge from 'webpack-merge' 3、操作参数 新增 // 新增一个id this.$...
  • 动态路由 基本使用 使用 :参数名 { path:"/weather/:city", name:"Weather", component: Weather } 组件实现 <template> <div> <h1>天气预报</h1> <h2>城市:{{city}}</...
  • vue 动态路由 Get传值

    2019-09-22 10:11:37
    main.js 1 //2.配置路由 注意:名字 ... 3 const routes = [ 4 { path: '/home', component: Home }, 5 { path: '/news', component: News }, 6 7 { path: '/content/:aid', component: Content...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 692
精华内容 276
关键字:

vue3动态路由

vue 订阅