Vue Router的使用（扫盲篇）

为什要使用Vue Router？

在传统的web网页里想要访问页面中不同的功能模块，通常需要变换url来切换不同的html，这样每次加载html都会消耗一定的时间，如果这种访问页面的方式用在webapp上，会非常影响体验。那能不能像原生app一样可以迅速切换不同功能页面呢？Vue Router就实现了SPA（单页面应用），根原生app一样可以迅速切换不同功能页面而不需要加载时间。

SPA缺点

1.不利于SEO，因为单页面的html文件只是一个空壳文件，它里面的所有内容都是通过ajax请求获得的，这样一来搜索引擎就无法抓取网页的关键内容。
解决办法：服务端渲染SSR
2.首屏渲染时间长
解决办法：预渲染（适用于静态站点，如：关于我们、联系方式）
也可以使用Nuxt.js来解决以上缺点，这里不做介绍，感兴趣的同学可以查阅相关文档。

Vue Router的实质

我们在使用vue编写页面的时候通常都会用到组件，通常我们会把定义好的组件用定义标签的方式引入到页面中，但是这种引入方式不够灵活，Vue Router的作用就是能让我们动态的引入我们需要的组件。

如何使用Vue Router

1.npm安装路由（前提是已经掌握了npm包管理工具）

cnpm install vue-router --save      //建议用cnpm镜像来安装

2.在项目src文件夹中创建router文件夹，在router文件夹中创建router.js文件

目录.png

3.在router.js中配置路由
配置路由之前要先创建路由所要引入的动态组件

组件.png

router.js中代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'


/*配置路由*/
const routes=[
    {path:"/demo1",component:demo1},
    {path:"/demo2",component:demo2}
    
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

main.js中代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
new Vue({
  el: '#app',
  router,      //挂在路由
  render: h => h(App)
})

根组件App.vue代码如下：

router-link为路由跳转标签，属性to是路由跳转的url，每个url都对应不同的切换组件。
router-view标签为路由插入组件的位置

动态路由和get路由传值

demo1.vue作为动态路由的使用示例，demo2.vue作为get路由传值的示例，修改router.js代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'


/*配置路由*/
const routes=[
    {path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
    {path:"/demo2",component:demo2}
    
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

修改App.vue代码如下：

demo1.vue代码如下：

demo2.vue代码如下：

如何用js跳转路由？

在components文件夹中创建demo3.js,代码入下：

router.js代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'
import demo3 from '../components/demo3'


/*配置路由*/
const routes=[
    {path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
    {path:"/demo2",component:demo2},
    //{path:"/demo3",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
    {path:"/demo3/:id",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

App.vue代码如下：

运行后点击页面按钮，路由自动跳转为demo3

如何嵌套路由？

在components文件夹下创建如下文件：

目录结构.png

App.vue代码如下：

router.js代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'
import demo3 from '../components/demo3'
import demo4 from '../components/demo4'
import demo4a from '../components/demo4/demo4-1'
/*配置路由*/
const routes=[
    {path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
    {path:"/demo2",component:demo2},
    //{path:"/demo3",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
    {path:"/demo3/:id",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
    {path:"/demo4",component:demo4,children:[
        {path:"demo4-1",component:demo4a}
    ]},//name属性是给路由起别名，方便用js的方式去跳转
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

demo4.vue代码如下：

demo4-1.vue代码如下

运行代码，嵌套路由效果如下：

运行结果.png

路由hash模式 VS history模式

路由的默认模式是hash模式（如上个运行结果图的url多出了一个“#），这种模式无法在页面中使用锚点定位，所以项目中要尽量使用history模式，router.js修改如下配置：

/*实例化路由*/
const router = new VueRouter({
  mode:"history",   //模式修改  
  routes // （简写）相当于 routes: routes
})

以上便是vue-router在项目中最常用的方法和方式，如有错误，恳请指正。

止水
于沈阳
2019/03/31 22：42