Vue动态路由

3.router 是一个机制，相当于一个管理者，它来管理路由。区别：this.$router.push()跳转到指定的url，会向history插入新记录this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。传参的时候，向query中写入数据，当你在点击按钮，访问组件的时候，地址栏中，会显示

仙鹤__

4925人浏览 · 2023-05-27 12:16:25

仙鹤__ · 2023-05-27 12:16:25 发布

预览：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>

预览：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^