vue router 动态路由

何为动态路由？能够提供参数的路由即为动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。

例如：

图书商品：   /goods?type=book   

汽车商品：   /goods?type=car     

美食商品：   /goods?type=food

路由地址相同，都是要请求同一个组件，但携带参数不同，请求数据类型不同

动态路由有两种传参方式

 1.模板直接写路径名 ，通过this.$route.params得到路径（推荐写法）

<router-link to="/goods/***">food</router-link>//goods/后可以为任何值

<nav>
    <router-link to="/goods/book">book</router-link>
    <router-link to="/goods/car">car</router-link>
    <router-link to="/goods/food">food</router-link>
    <!-- <router-link to="/goods/***">food</router-link>-->
</nav>	  

<script>
	//一，定义组件
    const Goods = {
        template: `
            <div>
                <div>{{this.$route.params}}</div>
                <ul><li></li></ul>
            </div>
        `,
        created(){
            console.log(this.$route.params.type)
            //发起axios请求	
        }
    }	    	
    // 第二步：定义路由表
    var routes =[
        {
           path:"/goods/:type",    //动态路由，type前加：
           component:Goods
        }
    ]	
    //第三部创建路由对象
    var router = new VueRouter({
        routes:routes,
        linkExactActiveClass: 'active'
    })	
    //第四步： 将router放入new Vue中
    var vm=new Vue({
        el:"#app",
        router
    })
</script>

和静态路由不同的是，定义路由表时注意path的值，比如

path:"/goods/:type"

通过this.$route.params得到传的参数，如果点击的是第一个，this.$route.params为{ "type": "book" }

想得到book，通过this.$route.params.type

2.模板中通过“?type=***”传值，通过this.$route.query得到路径（没有第一种方便）

<router-link to="/goods?type=***">***</router-link>

<footer>
    <nav>
        <router-link to="/goods?type=book">book</router-link>
        <router-link to="/goods?type=car">car</router-link>
        <router-link to="/goods?type=food">food</router-link>
        <!--<router-link to="/goods?type=***">***</router-link>-->
    </nav>	                  
</footer>

和第一种的差别在于定义路由表

var routes =[
    {
        path:"/goods",
        component:Goods
    }
]