vue.js进阶之vue-router

发表于 | 分类于

前端路由

在web开发中，路由是指根据url分配到对应的处理程序

vue-router

作用： 通过管理url，实现url和组件的对应以及通过url进行组件之间的切换
官方文档

单页应用(SPA)

加载单个HTML页面，并在用户与应用程序交互时动态更新该页面。

vue-router使用步骤

安装模块
npm install vue-router –save

引入模块
import VueRouter frome ‘vue-router’

作为Vue的插件
Vue.use(VueRouter)

创建路由实例对象
new VueRouter({ …配置参数 })

注入Vue选项参数
new Vue({ router })

告诉路由渲染的位置

hash和history模式（默认为hash，用mode更改）

1
2
3
4
let router = new Router({
  mode: 'history',
  ...
})

router-link各种配置项


默认生成a标签，如果要生成div可使用tage=“标签”

1
<router-link to="/" tag="div">home</router-link>

导航加上小图标方法

1
2
3
4
<router-link to="/" tag="li">
  <i></i>
  <span>home</span>
</router-link>

定义激活状态下的class名
第一种方法
linkActiveClass: class名

1
2
3
4
5
let router = new Router({
	mode: 'history',
	linkActiveClass: 'is-active'
	....
})

第二种方法
active-class=”class名”

1
<router-link to="/about" active-class="activeClass">about</router-link>

改变行为
在router-link增加event=“mouseover”

重定向和别名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  path: '*',
  //component: noFound
  
  // 重定向
  //redirect: '/home'
  //redirect: {path: '/home'}
  // redirect: {name: 'About'}
  redirect: (to) => {  //动态设置重定向的目标
    // 目标路由对象，就是访问的路径的路由信息
    if( to.path === '/123' ) {
      return '/home'
    }else if(to.path === '/456'){
      return {path: '/document'}
    }else{
      return {name: 'About'}
    }
    
    console.log(to)
    //return '/home'
}

嵌套路由的使用