r o u t e r 和 router和 router和route的区别:
1.
r
o
u
t
e
r
为
V
u
e
R
o
u
t
e
r
的
实
例
,
相
当
于
一
个
全
局
的
路
由
器
对
象
,
里
面
含
有
很
多
属
性
和
子
对
象
,
例
如
h
i
s
t
o
r
y
对
象
,
经
常
用
的
跳
转
链
接
就
可
以
用
t
h
i
s
.
router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象, 例如history对象,经常用的跳转链接就可以用this.
router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象,经常用的跳转链接就可以用this.router.push,和router-link跳转一样。
2.
$route相当于当前正在跳转的路由对象,可以从里面获取name,path,params,query等.
代码示例:
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路由参数</title>
</head>
<body>
<div id="app">
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.min.js"></script>
<script>
// 地址栏上 路由范式
// 1. xxxx.html#/user/1 params 动态路由
// 2.oooo.html#/user?userId=1 query 查询
var App = {
template:`
<div>
<router-link :to="{name:'userP',params:{id:1}}">用户1</router-link>
<router-link :to="{name:'userQ',query:{userId:2}}">用户2</router-link>
<router-view></router-view>
</div>
`
}
var UserParams = {
template:`
<div>我是用户1</div>
`,
created(){
// 抛出来两个对象 挂载vue实例化对象
console.log(this.$router);
console.log(this.$route); // params/query/path
}
}
var UserQuery = {
template:`
<div>我是用户2</div>
`
}
// 创建router对象
var router = new VueRouter({
// 配置路由对象
routes:[
// 路由匹配规则
{
// 动态路由参数 以冒号开头 用params匹配
path:'/user/:id',
name:'userP',
component:UserParams
},
{
path:'/user',
name:'userQ',
component:UserQuery
}
]
})
new Vue({
el:'#app',
data(){
return{}
},
template:'<App/>',
components:{App},
router // 交给vue实例化对象管理
})
</script>
</body>
</html>