Vue路由参数
vue路由参数
1、参数router-link
vue.prototype.xxx = {add:fn}`
所有组件中，使用this.xxx就能拿到这个对象
2、查询字符串
（1）配置：
:to="{name:'detail',query:{id:hero.id} }"
（2）规则：
{name:'detail',path:'/detail',component:Detail}`
（3）获取：
this.$route.query.id
（4）生成：
<a href="/detail?id=1">
3、path方式
（1）配置：
:to="{name:'detail',params:{id:hero.id}
（2）规则 ：
{ name:'detail',path:'/detail/:id'}
（3）获取：
this.$route.params.id
4、查询字符串配置参数
（1）router-link一次
（2） 获取的时候一次
5、 path方式配置参数
（1） router-link一次
（2）规则配置的时候声明位置
（3） 获取的时候一次
6、总结书写代码注意事项
path方式需要在路由规则中声明位置
7、vue-router中的对象
* $route 路由信息对象,只读对象
* $router 路由操作对象,只写对象
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>路由参数</title>
</head>
<body>
<div id="app"></div>
<!-- 引入vue.js文件 -->
<script src="js/vue.js"></script>
<!-- 引入核心vue-router包 -->
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 地址栏 路由范式
// （1）xxxxx.html#/user/1 params 动态路由参数
// (2) ooooo.html#/user?userId = 1 query
Vue.use(VueRouter);
// 声明组件
var User1={
template:`<div>我是用户1</div>`,
created(){
console.log(this.router);
console.log(this.route);
}
}
var User2={
template:`<div>我是用户2</div>`,
created(){
console.log(this.router);
console.log(this.route);
}
}
// 创建路由对象
var router=new VueRouter({
// 配置路由对象
routes:[
// 匹配路由对象
{
// 动态路由参数，以冒号开头
path:'/user/:id',
name:'user1',
component:User1
},
{
// 动态路由参数，以冒号开头
path:'/user/',
name:'user2',
component:User2
}
]
});
// 抛出两个全局组件router-link、router-view
// 抛出了两个对象 $router $route (路由信息对象)挂载到了Vue实例化对象
var App={
//
// <router-link :to = "{name:'userQ',query:{userId:2}}">用户2</router-link>
template:`
<div>
<router-link :to = "{name:'user1',params:{id:1}}">用户1</router-link>
<router-link :to = "{name:'user2',query:{userId:2}}">用户2</router-link>
<!--路由组件的出口-->
<router-view></router-view>
</div>
`,
}
// 实例化一个对象
new Vue({
el:'#app',
router:router,
template:`<App />`,
components:{
App
}
});
</script>
</body>
</html>
