router-link 路由参数

1、路由信息对象：通过 this.$route 可获取组件的配置路由的对象，只读对象。

 

 2、路由操作对象：通过 this.$router 可获取路由对象，也就是VueRouter，只写对象。

 

3、路由范式：

（1）xxx.html#/user/1。

 　　params 动态路由参数。

　　 匹配规则：需要在路由中声明位置。以冒号开头，可以是任意名称。{ path:'/user/:id', name:'userP', component:UserParams }

　　 配置方式：   :to="{name:'userP', params:{id:1}}"

<router-link :to="{name:'userP', params:{id:1}}">用户1</router-link>

 

（2）ooo.html#/user?userId = 1。

　　query 动态路由参数。

　　匹配规则： { path:'/user', name:'userQ', component:UserQuery }

　　配置方式：  :to="{name:'userQ', query:{userId:2}}"

<router-link :to="{name:'userQ', query:{userId:2}}">用户2</router-link> 

总结：

（一）、查询字符串（query）：

1、规则   { path:'/user', name:'userQ', component:UserQuery }。

2、配置   :to="{name:'userQ', query:{userId:2}}"。

3、获取   this.$route.query.userId。

4、生成  <a href="/user?userId=2">

（二）、path 方式（params）：

1、规则   {{ path:'/user/:id', name:'userP', component:UserParams }。注意：匹配你规则时需要声明位置。

2、配置  :to="{name:'userP', params:{id:1}}"。

3、获取   this.$route.params.id。

4、生成  <a href="/user/1">

    <div id="app"></div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        // 地址栏中的 路由范式
        // （1）xxx.html#/user/1 params 动态路由参数
        // （2）ooo.html#/user?userId = 1 query
        // 1.声明路由组件
        var UserParams = {
            template:'<div>我是用户1</div>',
            created(){
                console.log(this.$route);
                console.log(this.$router);
            }
        }
        var UserQuery = {
            template:'<div>我是用户2</div>',
            created(){
                console.log(this.$route);
                console.log(this.$router);
            }
        }
        // 2.创建路由对象
        var router = new VueRouter({
            // 3.配置路由对象
            routes:[
                // 4.创建路由匹配的规则
                {
                    // 动态路由参数匹配规则：以冒号开头，可以是任意名称
                    path:'/user/:id',
                    name:'userP',
                    component:UserParams
                },
                {
                    path:'/user',
                    name:'userQ',
                    component:UserQuery
                }
            ]
        });
        // 5.抛出两个全局组件 router-link router-view
        // 抛出两个对象 $router $route（路由信息对象） 挂载到了Vue实例化对象
        var App = {
            template:`
                <div>
                    <!-- router-link默认会被渲染为a标签，router-view默认会被渲染为herf标签 -->
                    <router-link :to="{name:'userP', params:{id:1}}">用户1</router-link>
                    <router-link :to="{name:'userQ', query:{userId:2}}">用户2</router-link> 
                    <!-- 6.路由组件的出口 -->
                    <router-view></router-view>
                </div>
            `
        };
        // 6.将配置好的路由对象关联到vue实例对象中
        new Vue({
            el:'#app',
            router:router,
            template:` 
                <App/>
            `,
            components:{
                App,
                router
            }
        });   
    </script>