一、vue-router简介
- Vue Router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
- 包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
二、vue-router使用
- 安装:
npm install --save vue-router
- 创建src/router/index.js文件来管理路由
- 配置src/router/index.js文件:
import Vue from 'vue' //引入vue实例
import Router from 'vue-router' //引入vue-router
Vue.use(Router) //使用Router
export default new Router({ //创建并导出Router实例
routes: [ //配置路由数组
{
path: '/', //设置根路由
name: 'Root',
components: {
main: PostList,
},
},
{
path: '/article/:id/:name', //设置动态路由接收参数
name: 'Article',
components: {
main: Article,
},
},
],
})
- 在main.js文件中将Router注入到vue实例:
import Router from './router' //引入Router
new Vue({
el: '#app',
router: Router, //vue实列中注入Router,注意属性名'router'不可更改
template: '<App/>',
components: {App},
})
- 确定视图加载的位置
<router-view></router-view>
三、vue-router路由的跳转和参数传递
- 必须在路由内加入路由的name
- 必须在path后加/: +传递的参数
<router-link :to="{name: 'Article',params: {id: item.id,name: item.author.loginname}}">
<span class="title">{{item.title}}</span>
</router-link>
//读取参数: this.$route.params.id
四、vue-router的监听
动态路由在来回切换时,由于它们都是指向同一组件,vue不会销毁再创建这个组件,而是复用这个组件。
当第一次点击(如:/userinfor/weizhuanhua)的时候,vue 把对应的组件渲染出来,但在/userinfor/weizhuanhua, /userinfor/yunqiangwu点击来回切换的时候,这个组件就不会发生变化了,组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情,那么只能在组件内部(UserInfor.vue中)利用watch 来监听$route 的变化。
watch: {
'$route'(to,from) {
this.getUserInfor();
},
},
网友评论