Vue-router
- 通过控制哈希值控制页面的切换
基本使用
-
导入
<script src="js/vue-router.js"></script> -
Vue实例挂载模板的内容
<div id="app"> <!-- 1.默认情况下router-link最终会被渲染a标签 2.可以通过tag属性更改渲染之后的标签 3.通过to属性，指定点击之后跳转的哈希值--> <router-link to="/one" tag="button">one</router-link> <router-link to="/two" tag="button">two</router-link> <!-- 1.组件会在router-view出口位置渲染显示--> <router-view></router-view> </div> -
创建组件
<template id="one"> <div> <p>我是one</p> </div> </template> <template id="two"> <div> <p>我是two</p> </div> </template> -
进行组件配置
/* 1.Vue实例和Vue-router实例的规则需要挂载相同组件配置,为了减少代码的冗余度，将组件的配置单独拿出来 */ const one = { template: "#one" } const two = { template: "#two" } -
定义路由规则
const routes = [ /* 1.一个对象就是一条规则，在对象里面通过path属性指定对应的地址， 2.在component属性注册组件 */ { path: '/one', // 绑定组件 component: one }, { path: '/two', // 绑定组件 component: two }, // 也通过redirect指定默认开始的哈希值 { path: '/', redirect: '/one'}, ] -
创建路由对象
const router = new VueRouter({ // 在路由对象上注册规则 routes: routes, // 通过linkActiveClass自定义激活状态下的类名 linkActiveClass: "nj-active" }) -
在Vue实例上绑定vue-router的实例对象
new Vue({ el: '#app', // 绑定路由对象 router: router, components:{ // 绑定组件 one: one, two: two }, });
Vue-router数据传递
<template id="one">
<div>
<p>我是one</p>
</div>
</template>
<template id="two">
<div>
<p>我是two</p>
</div>
</template>
-
通过url传递参数
<div id="app"> <router-link to="/one" tag="button">one</router-link> <!--可通过url后面以key=value的形式进行传递数据（get请求传递参数的方式）--> <router-link to="/two?name=lnj&age=33" tag="button">two</router-link> <router-view></router-view> </div>const one = { template: "#one", } const two = { template: "#two", // 通过生命周期方法created函数中拿到数据 created: function () { // 如果通过url方式传参，则通过路由的实例对象的query拿到数据 console.log(this.$route.query.name); console.log(this.$route.query.age); } } const routes = [ { path: '/', redirect: '/one'}, { path: '/one, component: one }, { path: '/two', component: two }, ] const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }) new Vue({ el: '#app', router: router, components:{ one: one, two: two }, }); -
通过在路由规则的path属性上留坑传递参数
<div id="app"> <!--在页面跳转就可以传递key1和key2的value值--> <router-link to="/one/zs/66" tag="button">one</router-link> <router-link to="/two" tag="button">two</router-link> <router-view></router-view> </div>const one = { template: "#one", created: function () { // 如果通过路由规则上挖坑则需要使用params获取数据 console.log(this.$route.params.name); console.log(this.$route.params.age); } } const two = { template: "#two", } const routes = [ { path: '/', redirect: '/one'}, /* 1.在路由规则的path属性上留坑 格式: path: '/哈希地址/:key1/:key2' */ { path: '/one/:name/:age', component: one }, { path: '/two', component: two }, ] const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }) new Vue({ el: '#app', router: router, components:{ one: one, two: two }, });
嵌套路由
<template id="one">
<div>
<p>我是one</p>
<!--路由的子界面切换需要在该父组件中router-link的to属性，继续绑定延申的哈希地址-->
<router-link to="/one/onesub1" tag="button">onesub1</router-link>
<router-link to="/one/onesub2" tag="button">onesub2</router-link>
<router-view></router-view>
</div>
</template>
<template id="onesub1">
<div>
<p>我是one子界面1</p>
</div>
</template>
<template id="onesub2">
<div>
<p>我是one子界面2</p>
</div>
</template>
<template id="two">
<div>
<p>我是two</p>
</div>
</template>
<div id="app">
<router-link to="/one" tag="button">one</router-link>
<router-link to="/two" tag="button">two</router-link>
<router-view></router-view>
</div>
const onesub1 = {
template: "#onesub1",
}
const onesub2 = {
template: "#onesub2",
}
const one = {
template: "#one",
// 在父组件中继续挂载子组件
component: {
onesub1: onesub1,
onesub2: onesub2
}
}
const two = {
template: "#two",
}
const routes = [
{ path: '/', redirect: '/one'},
{
path: '/one',
component: one,
// 在父组件的路由规则中，通过children属性继续配置子组件切换的路由规则
children: [
// 在进行子组件的路由规则配置时，地址可不需要加上【/】
{ path: "onesub1", component: onesub1 },
{ path: "onesub2", component: onesub2 }
]
},
{ path: '/two', component: two, },
]
const router = new VueRouter({
routes: routes,
linkActiveClass: "nj-active"
})
new Vue({
el: '#app',
router: router,
components:{
one: one,
two: two
},
});
路由出口的命名
一个路由出口会在对应的路由地址上显示一个组件，多个出口就会显示多个组件
-
可以指定出口名字和相应的路由组件
<div id="app"> <!--通过name属性给路由出口绑定名字--> <router-view name="name1"></router-view> <router-view name="name2"></router-view> </div><template id="one"> <div> <p>我是one</p> </div> </template> <template id="two"> <div> <p>我是two</p> </div> </template>const one = { template: "#one" } const two = { template: "#two" } const routes = [ { path: '/', /* 1.在同一路由地址上，对路由出口根据不同的名称显示不同的组件，需要将component属性变成components 2. components绑定一个对象，对象以keyvalue的形式指定在对应key的对应的组件*/ components: { name1: one, name2: two } }, ] const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }) new Vue({ el: '#app', router: router, components:{ one: one, two: two }, });
