Vue 路由的params参数

router->index.js

//引入文件，该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/Home'
import Home from '../components/About'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
export default new VueRouter({
    routes: [{
            name:'about',
            path: '/about',
            component: About
        },
        {
            name:'home',
            path: '/home',
            component: Home,
            children: [{
            	name:'message/:id/:title', //占位符
                path: "message",
                component: Message
            }]
        }
    ]
})

页面中跳转

动态写法：
m为v-for遍历的

<router-link to="/home/message/${m.id}/${m.title}">
message
</router-link>

1
2
3
4

静态写法

<router-link to="/home/message/666/hello">
message
</router-link>

1
2
3
4

接收参数：
$route.query.id
$route.query.title

值得注意：

当跳转路由是to的对象写法

<router-link 
	:to="{
		name:'message',      
		params:{
			id:666,
			title:'hello'
		}
	}"
1
2
3
4
5
6
7
8

使用params参数一定得使用name不能使用path

而query参数既可以使用name也可以使用path