一、介绍
VueRouter是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。在使用时我们需要提前安装,配置好环境。
安装
直接下载/CDN
https://unpkg.com/vue-router/dist/vue-router.js
二、创建单页面应用
HTML
<div id="app">
<!-- 路由出口 将匹配到的组件渲染在这里 -->
<router-view></router-view>
<!-- 导航 默认渲染一个a标签 通过to指定链接 -->
<router-link to='/denglu'>登录</router-link>
<router-link to='/zhuce'>注册</router-link>
</div>
js
- 在routes:[ ]中,每个路由规则,都是一个对象,这个规则对象都有必须的两个属性:
1.path,表示监听哪个路由链接的地址
2.component,表示如果路由是前面匹配到的path,则展示component属性对应的那个组件。component的属性值,必须为一个组件的模板对象,不能是组件的引用名称
//定义路由组件
var foo ={
template:'<p>登陆界面</p>'
}
var bar ={
template:'<p>注册界面</p>'
}
//创建router实例
var router= new VueRouter({
//定义路由
routes:[ //路由规则数组
{
path:'/denglu',
component:foo
},{
path:'/zhuce',
component:bar
}
]
})
//创建挂载根实例
new Vue({
el:'#app',
data:{},
methods:{},
router:router
})
其它相关属性
active-class:设置链接激活时使用的class类名
<style>
.active{
background-color : red;
}
</style>
<router-link to='/zhuce' active-class='active'>注册</router-link>
tag:将其渲染成某种标签
<router-link to="/denglu" tag="li">登录</router-link>
<!-- 渲染结果 -->
<li>登录</li>
event:声明用来触发导航的事件
鼠标移上去触发
replace:设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录
append:设置 append 属性后,则在当前 (相对) 路径前添加其路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
<router-link to='/denglu' event = "mouseover">登录</router-link>
动态路由参数的变化
当路由地址中携带参数,并以冒号开头时,参数值会被设置到params中,我们可以使用this.$route.params获取当中的数据。如:
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
当路由地址中携带参数,并以?key=value时,参数值会被设置到query中,我们可以使用this.$route.query获取当中的数据。如:
<router-link to='/account/denglu?id=1'>登录</router-link>
{{this.$route.query}}
watch的应用
在vue中,使用watch来响应数据的变化。
1.使用watch,监听data的数据变化,触发对应的处理函数。也可以给里面传参数,用来监听新值旧值,保存改变过的值
watch: {
'firstname':function(newVal,oldVal){
console.log('监听到 firstname的变化');
2.使用watch属性监听路由地址的改变($route.path)
var vm=new Vue({
el:'#app',
data:{},
methods:{},
router,
watch: {
'$route.path':function(newVal,oldVal){
if(newVal=='/login'){
console.log('欢迎进入到登录界面');
}else if(newVal=='/register'){
console.log('欢迎进入到注册界面');
}
}
},
})
3.deep深度监听
数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。