1.设置路由
① 路由map
在main.js中导入vue-router
import VRouter from 'vue-router'
设置全局路由
Vue.use(VRouter)
实例化router
let router = new VRouter({
// 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history',
routes: [
// 做一个映射表
{
path: '/apple',
component: Apple
},
{
path: '/banana',
component: Banana
}
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
②路由视图
在app.vue文件中嵌入<router-view></router-view>
<template>
<div id="app">
<!--
访问apple的时候,将apple的视图塞到这个位置
访问banana的时候,将banana的视图塞到这个位置
-->
<router-view></router-view>
</div>
</template>
实现效果
路由视图
③ 路由导航
在app.vue文件中,嵌入router-link标签,该标签可以实现a标签的效果
<router-link :to="{path:'apple'}">to apple</router-link>
具体使用:
<template>
<div id="app">
<!--
访问apple的时候,将apple的视图塞到这个位置
访问banana的时候,将banana的视图塞到这个位置
-->
<router-view></router-view>
<router-link :to="{path:'apple'}">to apple</router-link>
<router-link :to="{path:'banana'}">to banana</router-link>
</div>
</template>
效果:
路由导航
2.路由参数
作用:为页面传递路由参数.
在路由映射表中配置需要传递的参数:
比如:apple页面,我需要传递一个color的参数,可以在path中以:开头设置参数.
path: '/apple/:color',
具体使用:
let router = new VRouter({
// 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history',
routes: [
// 做一个映射表
{
path: '/apple/:color',
component: Apple
},
{
path: '/banana',
component: Banana
}
]
})
当我在页面跳转时,直接在地址后面拼接参数,下面的red,即为传递的color参数
http://localhost:8080/apple/red
在script标签中获取页面传递的参数,通过this.$route.params全局的对象来获取
<template>
<div class="hello">
<h1>{{msg}}</h1>
<button @click="getParams">get params</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'I am componnet apple'
}
},
methods: {
getParams () {
console.log(this.$route.params)
}
}
}
</script>
上面的打印结果为:
{color: "red"}
在template标签中使用界面传递过来的参数,可以使用$route.params.color
<template>
<div class="hello">
<h1>{{msg}}</h1>
<p>{{$route.params.color}}</p>
<button @click="getParams">get params</button>
</div>
</template>
$route.params.color 获取页面传递的参数
传递多个参数
路由中设置如下:
path: '/apple/:color/detail/:type',
传递参数的url:
http://localhost:8080/apple/red/detail/3
打印传递过来的所有参数:
{color: "red", type: "3"}
3.嵌套路由(子路由)
children
嵌套路由,子路由插入到了父组件apple中
let router = new VRouter({
// 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history',
routes: [
// 做一个映射表
{
path: '/apple',
component: Apple,
// 嵌套路由,子路由插入到了父组件apple中
children: [
{
path: 'red',
component: RedApple
}
]
},
{
path: '/banana',
component: Banana
}
]
})
在父路由apple组件中,将RedApple组件插入进来
<template>
<div class="hello">
.......
<router-view></router-view>
</div>
</template>
嵌套子路由
to red apple
<router-link :to="{path:'apple/red'}">to red apple</router-link>
路由的其他操作
基于当前路径下,跳转到apple
<router-link to="apple">to apple</router-link>
上面的和下面的区别
<router-link :to="{path:'banana'}">to banana</router-link>
如果要跳到根目录,在apple前加/
<router-link to="/apple">to apple</router-link>
上面的和下面的区别
<router-link :to="{path:'banana'}">to banana</router-link>
如果绑定的话,我们也可以动态的修改路径
<template>
<div id="app">
<router-link :to="path">to apple</router-link>
......
</div>
</template>
<script>
export default {
data () {
return {
path: 'apple'
}
}
}
</script>
如果绑定的话,不想动态修改路径,我们也可以直接写死,
注意:apple一定要用单引号括起来,不然他会去data里面找apple,会报找不到对象的error
<router-link :to="'apple'">to apple</router-link>
也可以传递参数
<router-link :to="{path:'banana',param:{color:'yellow'}}">to banana</router-link>
通过tag,将link变成li标签,当然也可以设置变成其他标签
<router-link :to="'apple'" tag="li">to apple</router-link>
*以上都属于声明式导航
下面感受下编程式导航
可以通过push,跳转到特定的页面
router.push('apple')
或者
router.push({path: 'apple'})
或者name
......
应用场景:
当我们每次路由切换的时候,为他设置一些操作
比方说:检查用户的登录状态,如果用户未登录,就通过编程式导航跳转到登录界面
router.beforeEach(router.push('登录界面'))
4.命名路由和命名视图
- 命名路由
我们可以在设置路由时,给设一个name属性,导航过程中直接:to="{name: '对应的name'}"即可
let router = new VRouter({
mode: 'history',
routes: [
{
path: '/apple',
component: Apple,
//命名路由
name: 'applePage',
}
......
]
})
在外面其他地方使用时:
<router-link :to="{name: 'applePage'}" >to apple</router-link>
- 命名视图
和上面的命名路由相似,给component,添加指定的命名
let router = new VRouter({
mode: 'history',
routes: [
{
path: '/apple',
//命名视图
component: {
viewA: Apple,
viewB: RedApple
},
//命名路由
name: 'applePage',
}
......
]
})
在外面其他地方使用时:
<router-view name="viewA"></router-view>
或者
<router-view name="viewB"></router-view>
分别插入不同的视图
5.重定向
redirect
初始化路由时设置
let router = new VRouter({
// 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history',
routes: [
{
//当路径为'/'时,重新跳转到apple
path: '/',
//设置重定向
redirect: '/apple'
},
{
path: '/apple',
......
},
{
path: '/banana',
......
}
]
})
重定向
6.使用过渡动画制作路由跳转动画
keep-live :切换过的视图会被缓存起来,如果不加keep-live 每次都会去重新请求一次,这样比较消耗资源
<transition name="fade">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
注意:
当我们切换导航的时候,当前的link标签的类会被赋值为class="router-link-active",这是一个很有用的操作.
给router-link添加active-class="active" 用于修改样式
<ul>
<router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
{{ item.name }}
</router-link>
</ul>
css部分
选种和hover时,显示蓝色
.product-board li.active,
.product-board li:hover {
background: #4fc08d;
color: #fff;
}
......
-
router-view的keep-alive属性,保证该视图只渲染一次,来回切换不重复渲染
<router-view :seller="seller" keep-alive></router-view>
router-view的keep-alive属性
