Vue-router知识点

发表于 | 分类于


vue-router是什么

1、vue-router就是路径管理器。传统的页面应用，是用一些超链接来实现页面切换和跳转的。但是vue单页面应用只有静态资源和一个index.html页面，所以不能用a标签进行跳转，只能用vue-router来管理。在vue-router单页面应用中，路径之间的切换就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

2、实现原理：单页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

vue-router模式

1、Hash模式：使用URL的hash来模拟一个完整的URL。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。

2、History模式：这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。不过要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

实际使用

router配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import SystemRouters from './systemRouters'

Vue.use(Router)

const routes = [
  ...SystemRouters // 白条活动路由
]

const router = new Router({
  base: '/unicom/',
  mode: 'history',
  routes,
  strict: process.env.NODE_ENV !== 'production'
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) { // 路由发生变化修改页面title
    document.title = to.meta.title
  }
  next()
})

export default router

// router/systemRouters.js
export default [
  { path: '/', redirect: '/admin/index' },
  { path: '/404', component: () => import('@/common/404'), name: '404', meta: { title: '404未找到' } },
  { path: '/login', component: () => import('@/common/login'), name: 'login', meta: { title: '登录', keepAlive: true } },
  { path: '/admin', component: () => import('@/common/home'), name: 'home', meta: { title: '首页' } }
]
引入router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.prototype.$setItem = setItem
Vue.prototype.$setBtnConfig = setBtnConfig
Vue.prototype.$disposeTreeData = disposeTreeData
Vue.prototype.$format = format
Vue.prototype.$authBtn = authBtn
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
路由入口
1
2
3
4
5
6
7
8
9
10
// App.vue
<template>
  <div id="app"
       class="colorBlue">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
嵌套路由(二级路由)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// router/systemRouters.js

import Layout from '@/common/layout/Layout'
{ path: '/admin',
    component: Layout,
    children: [
      { path: 'index', component: () => import('@/common/home'), meta: { title: '首页' } }
    ]
  },

// common/layout/Layout.vue, 存在第二个router-view
<template>
  <div id="app"
       class="colorBlue">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//App.vue
<template>
  <div id="app">
    <div v-on:click="sdf">go to foo</div>   //+一定要用方法，用click="router.push"没用
    <router-link to="/foo">Go to Foo{{$route.params}}</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  import router from './router'
  export default {
  name: 'app',
    methods:{          //+
      sdf(){
        router.push({ path: `/foo/12`})
        window.location.reload()    //最后一定要刷新，不刷新没用，但是官网没提
      }
    }
}
</script>
路由组件传参
1
2
3
4
5
6
7
8
9
10
// router
router.push({
  path: '/login',
  query: {
    name: 'Ethan'
  }
})

// <router-link>
<router-link :to="{name:'hi1',params:{username:'jspang',id:'555'}}">Hi页面1</router-link>

$route和$router的区别

$route
1
2
3
4
5
6
7
// $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
$route.path // 当前路由的路径
$route.params // 一个 key/value 对象
$route.query // 一个 key/value 对象，表示 URL 查询参数。
$route.hash // 当前路由的 hash 值 (不带 #) 
$route.fullPath // 完成解析后的 URL，包含查询参数和 hash 的完整路径。
$route.name 当前路径名字
$router
1
2
3
4
5
this.$router.go(-1)//跳转到上一次浏览的页面
this.$router.replace('/menu')//指定跳转的地址
this.$router.replace({name:'menuLink'})//指定跳转路由的名字下
this.$router.push('/menu')//通过push进行跳转
this.$router.push({name:'menuLink'})//通过push进行跳转路由的名字下