Vue动态路由

最新推荐文章于 2024-04-30 12:42:22 发布
最新推荐文章于 2024-04-30 12:42:22 发布
阅读量4.7k 收藏 5
点赞数
文章标签： 服务器 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52629158/article/details/130899681
版权

预览：1.1.1 什么是动态路由

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到$route.params中。例如：

核心代码演示：

var User = { template:"<div>用户：{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        { path: "/user/:id", component: User },
    ]
})

1.1.2 动态路由传参，组件接收数据的多种实现方式

1.通过$route.params来获取路径参数

var User = { template:"<div>用户：{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        { path: "/user/:id", component: User },
    ]
})

传1个参数：

 <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user/100">用户中心</router-link>
        <router-view></router-view>
    </div>
<script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        //定义组件
        let login ={
            template:`
            <div>
            <h1>我是登录页面</h1>    
            </div>
            `
        }
        //用户中心组件
        let user={
            template:`
            <div>
            <h1>我是用户中心页面</h1>
            <h2>用户id是:{{$route.params.id}}</h2>    
              
            </div>
            `,
            mounted(){
                console.log(this.$route);
            }
        }
        //实例化
        let myvueRouter=new VueRouter({
            //配置路由
            routes:[
                {
                    path:'/',
                    redirect: '/login'
                },
                {
                    path:'/login',
                    name:'login',//命名路由
                    component:login
                },
                {
                    //动态传参
                    //传1个
                    path:'/user/:id',
                    name:'user',//命名路由
                    component:user
                }
            ]
        })
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               

            },
           
            router:myvueRouter,
            components: {
                login,user
            }
        })
    </script>

预览：

传多个参数：

<div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user/xy/100">用户中心</router-link>
        <router-view></router-view>
    </div>
<script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        //定义组件
        let login ={
            template:`
            <div>
            <h1>我是登录页面</h1>    
            </div>
            `
        }
        //用户中心组件
        let user={
            template:`
            <div>
            <h1>我是用户中心页面</h1>
            <h2>用户id是:{{$route.params.id}}</h2>    
            <h2>用户名是:{{$route.params.username}}</h2>        
            </div>
            `,
            mounted(){
                console.log(this.$route);
            }
        }
        //实例化
        let myvueRouter=new VueRouter({
            //配置路由
            routes:[
                {
                    path:'/',
                    redirect: '/login'
                },
                {
                    path:'/login',
                    name:'login',//命名路由
                    component:login
                },
                {
                    //动态传参
                   
                    //传多个
                    path:'/user/:username/:id',

                   
                    name:'user',//命名路由
                    component:user
                }
            ]
        })
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               

            },
           
            router:myvueRouter,
            components: {
                login,user
            }
        })
    </script>

预览：

 <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user/xy/post/150">用户中心</router-link>
        <router-view></router-view>
    </div>
<script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        //定义组件
        let login ={
            template:`
            <div>
            <h1>我是登录页面</h1>    
            </div>
            `
        }
        //用户中心组件
        let user={
            template:`
            <div>
            <h1>我是用户中心页面</h1>
            <h2>用户id是:{{$route.params.post_id}}</h2>    
            <h2>用户名是:{{$route.params.username}}</h2>        
            </div>
            `,
            mounted(){
                console.log(this.$route);
            }
        }
        //实例化
        let myvueRouter=new VueRouter({
            //配置路由
            routes:[
                {
                    path:'/',
                    redirect: '/login'
                },
                {
                    path:'/login',
                    name:'login',//命名路由
                    component:login
                },
                {
                    //动态传多个参数，并且路径的层级 多一些
                    path:'/user/:username/post/:post_id',
                    name:'user',//命名路由
                    component:user
                }
            ]
        })
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               

            },
           
            router:myvueRouter,
            components: {
                login,user
            }
        })
    </script>

预览：

2.通过props来接收参数（使用props:true）


var User = { 
    props:['post_id','username'],
    template:" <div>
            <h1>我是用户中心页面</h1>
            <h2>用户id是:{{post_id}}</h2>    
            <h2>用户名是:{{username}}</h2>    
            </div>"
}
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为true，route.params将会被设置为组件属性
        {  path:'/user/:username/post/:post_id',  
            name:'user',//命名路由
                    component:user,
                    props:true },
    ]
})

预览：

 

3.我们可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用

 <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user">用户中心</router-link>
        <router-view></router-view>
    </div>
 //定义组件
        let login ={
            template:`
            <div>
            <h1>我是登录页面</h1>    
            </div>
            `
        }
        //用户中心组件
        let user={
            props:['nickname','age'],
            template:`
            <div>
            <h1>我是用户中心页面</h1>
           
            <h2>昵称是:{{nickname}}</h2>
            <h2>年龄是:{{age}}</h2>
            </div>
            `,
            mounted(){
                console.log(this.$route);
            }
        }
  // 创建路由实例并配置路由规则
        Vue.use(VueRouter)
        let myrouter = new VueRouter({
            // routes是路由规则数组
            routes:[
                // 每一个路由规则都是一个对象，对象中至少包含path和component两个属性
                {
                    // 我决定你在 router-link上 ，按照我的要求去写参数
                    path:'/user',
                    component:User,
                    props:(route)=>({
                        nickname:'小余',
                        age:19
                    })
                },
                {
                    path:'/regis',
                    component:Register
                }
            ]
        })

预览：

4.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式

 

<div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user/100">用户中心</router-link>
        <router-view></router-view>
    </div>
<script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        //定义组件
        let login ={
            template:`
            <div>
            <h1>我是登录页面</h1>    
            </div>
            `
        }
        //用户中心组件
        let user={
            props:['nickname','age','id'],
            template:`
            <div>
            <h1>我是用户中心页面</h1>
           
            <h2>昵称是:{{nickname}}</h2>
            <h2>年龄是:{{age}}</h2>
            <h2>编号是:{{id}}</h2>
            
            </div>
            `,
            mounted(){
                console.log(this.$route);
            }
        }
        //实例化
        let myvueRouter=new VueRouter({
            //配置路由
            routes:[
                {
                    path:'/',
                    redirect: '/login'
                },
                {
                    path:'/login',
                    name:'login',//命名路由
                    component:login
                },
                {
                    //动态传参

                    //动态传1个参，
                    path:'/user/:id',
                    name:'user',//命名路由
                    component:user,
                    props:(route)=>({
                       
                        nickname:'小马过河',
                        age:19,
                        id:route.params.id
                    })
                }
            ]
        })
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               

            },
           
            router:myvueRouter,
            components: {
                login,user
            }
        })
    </script>

预览：

1.1.3 脚本访问路由（编程式导航访问路由）

路由中有三个基本的概念 route, routes, router

1.route 它是一条路由，由这个英文单词也可以看出来，它是单数。 Home按钮  => home内容， 这是一条route,  about按钮 => about 内容， 这是另一条路由。

2.routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。路由规则[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3.router 是一个机制，相当于一个管理者，它来管理路由。路由对象。路由管理器。因为routes只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

路由的跳转方式2种：

(1)通过标签：<router-link to='/login'></router-link>

 <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-link to="/user">我的</router-link>
    <router-view></router-view>

(2)通过js控制跳转this.$router.push({path:'/login'})

this.$router 路由操作对象中有 2个方法 ，可以实现路由的跳转。这两个方法分别是 push() 和replace()。

区别：this.$router.push()  跳转到指定的url，会向history插入新记录this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

this.$router.go(-1) 常用来做返回，读history里面的记录后退一个

vue-router中的对象：$route 路由信息对象,只读对象$router 路由操作对象,只写对象

this.$router.push()  跳转到指定的url，同时会向history历史记录对象中插入新记录。例如：

<div id="app">
        <button @click="toLogin">登录</button>
        <button @click="toRegister">注册</button>
        <button @click="toUser">用户中心</button>
        <button @click="toShop">商品</button>
        <button @click="goBack">返回上一步</button>
        <router-view></router-view>
    </div>

    <template id="login">
        <div>
            <h1>登录页面</h1>
        </div>
    </template>

    <template id="register">
        <div>
            <h1>注册页面</h1>
        </div>
    </template>

    <template id="user">
        <div>
            <h1>用户中心页面</h1>
        </div>
    </template>

    <template id="shop">
        <div>
            <h1>商品页面</h1>
        </div>
    </template>
<script>
        // 登录组件
        const Login = {
            template:'#login'
        }

        // 注册组件
        const Register = {
            template:'#register'
        }
        // 用户中心组件
        const User = {
            template:'#user'
        }
        // 商品组件
        const Shop = {
            template:'#shop'
        }


        // 创建路由实例并配置路由规则
        Vue.use(VueRouter)
        let myrouter = new VueRouter({
            //  routes是路由规则数组
            routes:[
                {
                    path:'/login',
                    component:Login
                },
                {
                    path:'/regis',
                    component:Register
                },
                {
                    path:'/user',
                    component:User
                },
                {
                    path:'/shop',
                    component:Shop
                },
            ]
        })

        // 根组件
        //  将路由挂载到Vue实例中
        let vm = new Vue({
            el:'#app',
            data:{
   
            },
            // 通过router属性挂载路由对象
            router:myrouter,
            methods:{
                toLogin(){
                // $router 路由操作对象,只写对象
                // this.$router.push('/login')
                   this.$router.push({path:'/login'})
                   console.log(history);
                   
                },
                toRegister(){
                   this.$router.push({path:'/regis'})
                   console.log(history);
                   
                },
                toUser(){
                   this.$router.replace({path:'/user'})
                   console.log(history);
                },
                toShop(){
                   
                },
                goBack(){
                   this.$router.go(-1)
                }

            },
            components:{
                Login,
                Register,
                User,
                Shop
            }
        })
    </script>

this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

注意：

如果你使用的是this.$router.repalce() 方法 进行的路由跳转。我们不能使用 this.$router.go() 。因为go() 方法读的是history历史记录对象 上一个记录。

预览：

1.1.4 脚本访问路由并传参

路由传参---通过js脚本传参

我们 在 自己的组件中例如我们在登录组件login中的生命周期钩子函数created中 用this.$route 路由信息对象,只读对象 ,去方式 js脚本路由传参，传递过来的数据。

这个数据，我们只要能访问到，我们就可以在自己的组件中，任意的去自由的使用。

传参的时候，向query中写入数据；  在组件中取参的时候， 从query读取数据

特点：

传参的时候，向query中写入数据， 当你 在 点击按钮，访问组件的时候， 地址栏中，会显示 你向query中 写入的数据。

 <template id="login">
        <div>
            <h1>登录页面</h1>
            <h2>{{lid}}</h2>
            <h2>{{lname}}</h2>
        </div>
    </template>
<script>
        // 登录组件
        const Login = {
            template:'#login',
            data(){
                return{
                    lid:'',
                    lname:'',
                }
            },
            mounted(){
                this.lid=this.$route.query.uid;
                this.lname=this.$route.query.uname

            }
        }

        // 注册组件
        const Register = {
            template:'#register'
        }
        // 用户中心组件
        const User = {
            template:'#user'
        }
        // 商品组件
        const Shop = {
            template:'#shop'
        }


        // 创建路由实例并配置路由规则
        Vue.use(VueRouter)
        let myrouter = new VueRouter({
            //  routes是路由规则数组
            routes:[
                {
                    path:'/login',
                    component:Login
                },
                {
                    path:'/regis',
                    component:Register
                },
                {
                    path:'/user',
                    component:User
                },
                {
                    path:'/shop',
                    component:Shop
                },
            ]
        })

        // 根组件
        //  将路由挂载到Vue实例中
        let vm = new Vue({
            el:'#app',
            data:{
   
            },
            // 通过router属性挂载路由对象
            router:myrouter,
            methods:{
                toLogin(){
                // $router 路由操作对象,只写对象
                // this.$router.push('/login')
                   this.$router.push(
                    {path:'/login',
                     query:{
                        uid:110,uname:'xy'
                    }
                    }
                   
                    )
                //    console.log(history);
                   
                },
                toRegister(){
                   this.$router.push({path:'/regis'})
                   console.log(history);
                   
                },
                toUser(){
                   this.$router.replace({path:'/user'})
                   console.log(history);
                },
                toShop(){
                   
                },
                goBack(){
                   this.$router.go(-1)
                }

            },
            components:{
                Login,
                Register,
                User,
                Shop
            }
        })
    </script>

 预览：

传参的时候，向params中写入数据；  在组件中取参的时候， 从params读取数据

<div id="app">
        <button @click="toLogin">登录</button>
        <button @click="toRegister">注册</button>
        <button @click="toUser">用户中心</button>
       
        <router-link :to="{name:'shop',params:{gid:120,gname:'手机'}}">商品</router-link>
        <button @click="goBack">返回上一步</button>
        <router-view></router-view>
    </div>
<template id="login">
        <div>
            <h1>登录页面</h1>
            <h2>{{lid}}</h2>
            <h2>{{lname}}</h2>
        </div>
    </template>

    <template id="register">
        <div>
            <h1>注册页面</h1>
        </div>
    </template>

    <template id="user">
        <div>
            <h1>用户中心页面</h1>
        </div>
    </template>

    <template id="shop">
        <div>
            <h1>商品页面</h1>
            <h2>商品id:{{sid}}</h2>
            <h2>商品名称:{{sname}}</h2>
        </div>
    </template> 
   
    <script>
        // 登录组件
        const Login = {
            template:'#login',
            data(){
                return{
                    lid:'',
                    lname:'',
                }
            },
            mounted(){
                this.lid=this.$route.query.uid;
                this.lname=this.$route.query.uname

            }
        }

        // 注册组件
        const Register = {
            template:'#register'
        }
        // 用户中心组件
        const User = {
            template:'#user'
        }
        // 商品组件
        const Shop = {
            template:'#shop',
            data(){
                return{
                    sid:'',
                    sname:'',
                }
            },
            mounted(){
                console.log(this.$route);
                this.sid=this.$route.params.gid
                this.sname=this.$route.params.gname;
            }
        }


        // 创建路由实例并配置路由规则
        Vue.use(VueRouter)
        let myrouter = new VueRouter({
            //  routes是路由规则数组
            routes:[
                {
                    path:'/login',
                    component:Login
                },
                {
                    path:'/regis',
                    component:Register
                },
                {
                    path:'/user',
                    component:User
                },
                {
                    path:'/shop',
                    name:'shop',
                    component:Shop
                },
            ]
        })

        // 根组件
        //  将路由挂载到Vue实例中
        let vm = new Vue({
            el:'#app',
            data:{
   
            },
            // 通过router属性挂载路由对象
            router:myrouter,
            methods:{
                toLogin(){
                // $router 路由操作对象,只写对象
                // this.$router.push('/login')
                   this.$router.push(
                    {
                     path:'/login',
                     query:{
                        uid:110,uname:'xy'
                    }
                    }
                   
                    )
                //    console.log(history);
                   
                },
                toRegister(){
                   this.$router.push({path:'/regis'})
                   console.log(history);
                   
                },
                toUser(){
                   this.$router.push({path:'/user'})
                   console.log(history);
                },
                toShop(){
                   
                },
                goBack(){
                   this.$router.go(-1)
                }

            },
            components:{
                Login,
                Register,
                User,
                Shop
            }
        })
    </script>

预览：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

仙鹤__
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现动态路由
无所谓^_^博客
03-23 1万+
动态添加路由。说着好像很简单，但看了很多教程，也跟着教程写了很多代码，但最后都跑不通（很多原因，比如：版本问题，教程没有全部代码，只有核心代码片段等）。😭😭😭所以，我只能狠下心，写下这篇博客，方便自己总结，也为了避免大家踩坑。废话不多说，
vue 动态路由
01-20
动态路由是 Vue Router 提供的一个功能，允许我们创建灵活的路由规则，能够处理带有动态参数的URL。在这个场景中，我们将深入探讨如何在 Vue 中实现动态路由。 1. **新建路由组件 (User.vue)** 在 `User.vue` 文件...
关于vue的动态路由或菜单权限问题的解决方案
weixin_45895959的博客
05-04 6527
1.什么是动态路由？ 首先我们需要知道什么是动态路由，或者说什么是菜单权限？ 在一个系统中，每一个用户都拥有对应权限允许做的事情，当我们设计者不想暴露更多的操作给用户的时候，我们就可以利用后端检查用户所对应的权限，然后返回对应的菜单列表给前端，限制用户更多的操作。 2.实现动态路由的步骤 1.在我们简单了解动态路由的概念之后，在VueRouter的api中提供了一个addRoute的方法，我们可以添加对应的路由进入Vue中的路由表中，这样我们就可以访问到对应的页面了。 2.利用axios传递uid到后
Vue Router 动态路由
最新发布
qq_40930841的博客
04-30 1848
动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数），使用动态路径参数可以提高路由规则的可复用性。在VueRouter的路由路径中，使用“参数名”的方式可以在路径中定义动态路径参数。:id', component: 组件 }]其中:id是动态路径参数，id为参数名。（注意：不同动态路径参数的动态路由在进行切换时，由于它们都是指向同一组件，所以Vue不会销毁再重新创建这个组件，而是复用这个组件。
Vue-Router动态路由
weixin_53874202的博客
03-04 5811
作用：动态拼接一些路径 语法：/user/:userId(:XX表示可以动态拼接，路径可以渲染成/user/zhangsan或者/user/lisi等等) 1.通过router-link渲染的跳转页面 通过动态绑定to属性后面跟着动态路由来跳转页面(:to="’/about/’+info") Router-Index.js import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const About
动态路由传参，组件 接收 传递过来的数据 的多种实现方式（$route.params 、props 、props设置为对象）
weixin_72303943的博客
06-05 1354
动态路由传参，组件 接收 传递过来的数据 的多种实现方式（$route.params 、props 、props设置为对象）
Vue-Router(4) 学习之动态路由 addRoute
Raywh的博客
05-15 8984
前端动态路由：前端动态路由是指根据用户的操作或应用的状态变化，在前端代码中动态加载和渲染不同的页面内容，而无需刷新整个页面。这种方式可以提供更流畅和交互性强的用户体验。Vue Router 是 Vue.js 的官方路由库，用于实现前端的路由功能。通过配置路由表，可以定义路由路径和组件之间的映射关系，实现动态加载和切换不同的页面组件。addRoute 方法：在 Vue Router 中，addRoute 方法用于动态添加路由。你可以根据需要在运行时根据权限或其他条件动态地添加路由配置。
vue动态路由配置及路由传参的方式
12-10
动态路由： 　当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个”共用”的组件，并且还要传参数，渲染不同的数据 　这就要用到动态路由跟路由传参了！ ...
vue动态路由:路由参数改变,视图不更新问题的解决
10-16
在Vue.js应用中，动态路由是一种常见的特性，它允许我们根据不同的参数来渲染不同的视图。在本篇文章中，我们将探讨一个关于Vue动态路由的问题，即当路由参数改变时，视图未能随之更新。这个问题主要发生在尝试从一...
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue动态路由缓存不相互影响的解决办法
10-17
主要介绍了Vue动态路由缓存不相互影响的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue路由传参（六种方式）
VXYupq的博客
04-04 5097
布尔模式传参，在路由配置文件中的路径配置中，如果你使用了动态路由，那么他不仅仅可以往params里面传递参数对象过去，他也会往props里面传递过去，注意参数接取需要在你所要跳转的路径的组件中接取，如果使用动态路由传递参数想要使用props，需要设置props为true。props:[,'name','age','sex'],在组件模板中接收。name:'老王',props:[,'name','age','sex'],在组件模板中接收。props:['id','name'],在组件模板中接收。
【Vue-Router】动态路由
小秀的博客
08-15 249
对路由的添加通常是通过routes选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由，此时可以使用动态路由。
路由原理及vue实现动态路由
qq_39321234的博客
05-19 3287
总之，Vue Router 提供了丰富的 API，可以轻松地实现路由功能，并支持路由参数、查询参数、命名路由、嵌套路由等功能，可以满足不同应用程序的需求。除了使用路由参数和查询参数来实现动态路由，Vue Router 还支持使用命名路由来实现动态路由。在前端框架中，例如 Vue，路由通常是通过路由库来实现的。在 Vue Router 中，路由配置还可以包括路由参数和查询参数，用于实现动态路由。当用户访问不同的 URL 时，Vue Router 会根据路由配置，找到对应的组件，并将其渲染到页面中。
Vue全套笔记（二）动态组件 插槽 路由
qq_40460454的博客
08-13 1915
什么是自定义指令vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。自定义指令的分类vue 中的自定义指令分为两类，分别是：⚫ 私有自定义指令⚫ 全局自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：使用自定义指令在使用自定义指令时，需要加上 v- 前缀。示例代码如下：为自定义指令动态绑定参数值。...
vue router 动态路由
Gomeer的博客
12-19 623
何为动态路由？能够提供参数的路由即为动态路由 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。 例如： 图书商品：   /goods?type=book    汽车商品：   /goods?type=car      美食商品：   /goods?type=food 路由地址相同，都是...
vue动态路由
咘噜biu的博客
01-17 487
import publicJS from "@/untils/public"; import api from '@/api/api'; import { routes, mainMenu } from '@/router/routes' import body from '@/components/body' import error from '@/components/404.vue' i...
vue中设置动态路由
aliven1的博客
09-09 1943
这其中使用到$router实例的方法，在main引入router.js文件时使用对应插件定义：this.￥route.￥avueRoute自定义路由的数据对象。2.routerBar内部的钩子函数，使用vuex的action方法，获取动态路由配置，存储到router中，并且缓存本地。1.路由设置中设置指定页面都使用固定的视图组件，复用布局里面的导航routerBar，router-view。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值