背景
在vue中除了可以通过v-if和v-show切换组件还可以通过，vueRouter切换组件。
- v-if和v-show是通过true和false来切换
- vueRouter是通过hash值来切换
使用方法
- 导入vueRouter
- 制定切换规则
- 创建路由对象
- 绑定到vue实例中
- 更据hash切换组件
<div id="app">
//5、指定hash规则
<a href="#/one">显示第一个组件</a>
<a href="#/two">显示第二个组件</a>
//6、使用该标签进行显示
<router-view></router-view>
</div>
<template id="one">
<div>
<div class="first">
我是第一个组件
</div>
</div>
</template>
<template id="two">
<div>
<div class="second">
我是第二个组件
</div>
</div>
</template>
<script>
//1、创建组件
const one={
template:"#one"
};
const two={
template:"#two"
};
//2、创建路由规则
const routes=[
{path:"/one",component:one},
{path:"/two",component:two}
];
//3、创建路由对象
let router=new VueRouter({
routes:routes
});
let vue=new Vue({
el:"#app",
//4、绑定到vue实例中
router:router,
data:{
name:"王大胜"
},
components:{
"one":one,
"two":two
}
})
</script>
router-link
背景
由于a标签设置hash不够专业，可以通过router-link设置hash
<router-link to="/one" tag="button">显示第一个组件</router-link>
<router-link to="/two" tag="button">显示第二个组件</router-link>
- to属性设置显示哪一个组件，且不用加#
- 利用tag属性更改标签的种类
- 可以通过类名来修改router-link的样式，也可以自定义route-link属性命名
let router=new VueRouter({
routes:routes,
linkActiveClass:"wds-active"
});
如果要在进入页面时候就先显示某一页面，通过路由规则来配置。
const routes=[
{path:"/",redirect:"/one"},
{path:"/one",component:one},
{path:"/two",component:two}
];
传递参数
由于已经将router绑定到vue实例中，那么就可以通过vue.$router拿到对象。并且所有的参数都会传递到该对象中。
传递方法1
直接hash值后面添加参数
<a href="#/one?name=wds&age=18">显示第一个组件</a>
通过router中的query来获取参数，且需要通过生命周期函数来获取。
const one={
template:"#one",
created:function () {
console.log(this.$route.query);
}
};
传递方法2
使用路由规则来传递
- 创建占位符
const routes=[
{path:"/one",component:one},
{path:"/two/:name/:pass",component:two}
];
- 指定hash值
<a href="#/two/ywh/444">显示第二个组件</a>
- 生命周期获取，该对象中的params获取参数
const two={
template:"#two",
created:function () {
console.log(this.$route.params);
},
};
嵌套路由
在一个路由组件中嵌套这子路由，实现在一个路由中切换其他组件
- 在切换标签中在父路由后面添加子路由名称
- 在父路由的规则中添加chiledren来保存子路由的配置且子路由不需要写“/”
<div id="app">
<router-link to="/one" tag="button">第一组件</router-link>
<router-link to="/two" tag="button">第二组件</router-link>
<router-view></router-view>
</div>
<template id="one">
<div>
<div class="first">
我是第一个组件
<router-link to="/one/onesub1" tag="button">第一子组件</router-link>
<router-link to="/one/onesub2" tag="button">第二子组件</router-link>
<router-view></router-view>
</div>
</div>
</template>
<template id="two">
<div>
<div class="second">
我是第二个组件
</div>
</div>
</template>
<template id="onesub1">
<div>
<div class="first-one">
我是第一子个组件
</div>
</div>
</template>
<template id="onesub2">
<div>
<div class="first-two">
我是第二个子组件
</div>
</div>
</template>
<script>
const oneSub={
template:"#onesub1",
};
const twoSub={
template:"#onesub2",
};
const one={
template:"#one",
components:{
onesub1:oneSub,
onesub2:twoSub,
}
};
const two={
template:"#two",
};
const routes=[
{
path:"/one",
component:one,
children:[
{
path:"onesub1",component:oneSub,
},
{
path:"onesub2",component:twoSub,
}
]
},
{path:"/two",component:two}
];
let router=new VueRouter({
routes:routes
});
let vue=new Vue({
el:"#app",
router:router,
data:{
name:"王大胜"
},
components:{
"one":one,
"two":two
}
})
</script>
命名视图
router-view和匿名插槽一样，如果不指定名称，那么复制的结果会一样
- 需要在路由规则中指定名称
const routes=[
{
path:"/",
components:{
name1:one,
name2:two,
}
},
];
//在name1中保存one该组件
<!--通过指定不同的名称可以实现不同的界面-->
<router-view name="name1"></router-view>
<router-view name="name2"></router-view>
Watch属性
该属性专业用于监听数据的变化并且会进行回调函数
- 绑定到vue实例中
let vue=new Vue({
el:"#app",
router:router,
watch:{
num1:function (newValue,oldValue) {
this.res=parseInt(this.num1)+parseInt(this.num2);
},
num2:function (newValue,oldValue) {
this.res=parseInt(this.num1)+parseInt(this.num2);
},
//拿到route中的path变化就可以实现数据的监听，newValue是新变化的值，oldValue是原来的值。
"$route.path":function (newValue,oldValue) {
console.log(newValue, oldValue);
}
},
data:{
num1:0,
num2:0,
res:0
},
methods:{
change1(){
this.res=parseInt(this.num1)+parseInt(this.num2);
},
change2(){
this.res=parseInt(this.num1)+parseInt(this.num2);
}
},
components:{
"one":one,
"two":two
}
})
