Vue 路由的params参数

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>

---

字符串形式：

<router-link to="/home/message/"+m.id+"/"+m.title>
message
</router-link>

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

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

---

对象写法：
值得注意： 当跳转路由是to的对象写法

<router-link 
	:to="{
		name:'message',      
		params:{
			id:666,
			title:'hello'
		}
	}"

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

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