Vue.js 动态路由匹配与编程式导航实践-优快云博客

本文介绍了Vue.js中动态路由匹配的三种方式：props为布尔值、对象类型和函数类型，并展示了命名路由的使用以及编程式导航的实现，包括router.push()方法的不同参数规则。通过实例代码详细解析了Vue.js路由配置和组件间的导航操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基础

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./vue.min.js"></script>
        <script src="./vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                <router-link to="/register">Register</router-link>
                <router-link to="/user/1">User1</router-link>
                <router-link to="/user/2">User2</router-link>
                <router-link to="/user/3">User3</router-link>
            </p>
            <div>
                <router-view></router-view>
            </div>
        </div>
        <script>

        var tab1 = {
            template:'<h3>tab1子组件</h3>'
        }
        var tab2 = {
            template:'<h3>tab2子组件</h3>'
        }
        var User = {
            template:'<h1>这是User组件 -- 用户id为{{$route.params.id}}</h1>'
        }
        var Register = {
            template:`
                <div>
                    <h1>Register组件</h1>
                    <hr/>
                    <router-link to="/register/tab1">tab1</router-link>
                    <router-link to="/register/tab2">tab2</router-link>
                    <router-view></router-view>
                </div>
            `
        };

        //动态路由匹配

        var router = new VueRouter({
            routes:[
                {path:'/',redirect:'/register'},
                {path:'/user/:id',component:User},
                {path:'/register',component:Register,children:[
                    {path:'/register/tab1',component:tab1},
                    {path:'/register/tab2',component:tab2},
                ]}
            ]
        })

        var vm = new Vue({
            el:'#app',
            data:{
            },
            router
        })
    </script>
    </body>
</html>

二、其他注意点

1. 动态路由匹配--第一种情况：props值为布尔值

配置：props: true

var User = {
    props:['id'],
    template:'<h1>这是User组件 -- 用户id为{{id}}</h1>'
}

//动态路由匹配

var router = new VueRouter({
    routes:[
        {path:'/',redirect:'/register'},
        {path:'/user/:id',component:User,props:true},
        {path:'/register',component:Register,children:[
            {path:'/register/tab1',component:tab1},
            {path:'/register/tab2',component:tab2},
        ]}
    ]
})

2. 动态路由匹配--第二种情况：props值为对象类型

var User = {
    props:['uname','age'],
    template:'<h1>这是User组件 -- {{uname}} -- {{age}}</h1>'
}

//动态路由匹配

var router = new VueRouter({
    routes:[
        {path:'/',redirect:'/register'},
        {path:'/user/:id',component:User,props:{uname:'zs',age:18}},
        {path:'/register',component:Register,children:[
            {path:'/register/tab1',component:tab1},
            {path:'/register/tab2',component:tab2},
        ]}
    ]
})

3. 动态路由匹配--第三种情况：props值为函数类型

var User = {
    props:['uname','age','id'],
    template:'<h1>这是User组件{{id}} -- {{uname}} -- {{age}}</h1>'
}

//动态路由匹配

var router = new VueRouter({
    routes:[
        {path:'/',redirect:'/register'},
        {path:'/user/:id',component:User,props:route=>({
            uname:'zs',
            age:18,
            id:route.params.id
        })
    },
        {path:'/register',component:Register,children:[
            {path:'/register/tab1',component:tab1},
            {path:'/register/tab2',component:tab2},
        ]}
    ]
})

4. 命名路由

1. <router-link :to="{name:'user',params:{id:3}}">User3</router-link>
2. 在routes里面配置时加上name属性
{name:'user',path:'/user/:id',component:User,props:route=>({
uname:'zs',
age:18,
id:route.params.id
})

5. 编程式导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/user">user</router-link>
        <router-link to="/register">register</router-link>
        <router-view></router-view>
    </div>
    <script>
        var user = {
            template:`
                <div>
                    <h1>这是user组件</h1>
                    <button @click="goRegister">跳转到注册页面</button>  
                </div>
            `,
            methods:{
                goRegister:function(){
                    this.$router.push('/register');
                }
            }
        }
        var register = {
            template:`
                <div>
                    <h1>这是register组件</h1>
                    <button @click="goBack">后退</button>  
                </div>
            `,
            methods:{
                goBack:function() {
                    this.$router.go(-1);
                }
            }
        }
        var router = new VueRouter({
            routes:[
                {
                    path:'/user',
                    component:user
                },
                {
                    path:'/register',
                    component:register
                }
            ]
        })
        var vm = new Vue({
            el:'#app',
            data:{},
            router
        })
    </script>
</body>
</html>

关于router.push()方法的参数规则

router.push({path:'/home'}) // 对象形式

router.push({name:'/user',params:{id:1}}) // 传递参数

router.push({path:'/register',query:{uname:'zs'}}) // /register?uname=zs