vue 路由参数_vue参数 path: name: components:说明-优快云博客

本文链接：https://blog.youkuaiyun.com/MorningSun_CX/article/details/100702960

本文详细对比了Vue中router和$route的区别，阐述了router作为VueRouter的实例，包含多个属性和子对象，如history对象，用于实现页面跳转；而$route则代表当前路由对象，可从中获取name、path、params和query等信息。

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

$r o u t e r 和$ route的区别：

1. $r o u t e r 为 V u e R o u t e r 的实例, 相当于一个全局的路由器对象，里面含有很多属性和子对象，例如 h i s t o r y 对象，经常用的跳转链接就可以用 t h i s .$ router.push，和router-link跳转一样。
2.
$route相当于当前正在跳转的路由对象,可以从里面获取name,path,params,query等.

代码示例:

!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>路由参数</title>
    </head>
    <body>
        <div id="app">
            
        </div>
        <script src="./node_modules/vue/dist/vue.min.js"></script>
        <script src="./node_modules/vue-router/dist/vue-router.min.js"></script>
        <script>
            // 地址栏上  路由范式
            // 1. xxxx.html#/user/1                  params 动态路由
            // 2.oooo.html#/user?userId=1   query  查询
            
            
            var App = {
                template:`
                <div>
                     <router-link :to="{name:'userP',params:{id:1}}">用户1</router-link>
                     <router-link :to="{name:'userQ',query:{userId:2}}">用户2</router-link>                     
                    <router-view></router-view>
                </div>
                `
            }
            
            var UserParams = {
                template:`
                    <div>我是用户1</div>
                `,
                created(){
                    // 抛出来两个对象  挂载vue实例化对象
                    console.log(this.$router);
                    console.log(this.$route);   // params/query/path 
                }
            }
            
            var UserQuery = {
                template:`
                    <div>我是用户2</div>
                `
            }    
                
            // 创建router对象
            var router = new VueRouter({
                // 配置路由对象
                routes:[
                    // 路由匹配规则
                    {
                        // 动态路由参数  以冒号开头  用params匹配
                        path:'/user/:id',
                        name:'userP',
                        component:UserParams
                    },
                    {
                        path:'/user',
                        name:'userQ',
                        component:UserQuery
                    }            
                ]
            })
        
            new Vue({
                el:'#app',
                data(){
                    return{}
                },
                template:'<App/>',
                components:{App},
                router  // 交给vue实例化对象管理
            })
    
        </script>
    </body>
</html>