vue路由的使用

如果使用vue-cli脚手架工具的话，默认会给你安装路由的提示选项，根据自己需要选择安装与否，这里仅仅是了解其原理。

1、首先是安装vue-router插件

cnpm（npm） install --save vue-router

2、然后新建在src目录下新建一个router文件夹，然后新建一个index.js的文件，紧接着自定义路由组件，许多描述在注释中

import Vue from 'vue' //要使用vue的路由插件必然先引用vue
import VueRouter from 'vue-router'   //引用vue插件，注意写法
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

Vue.use(VueRouter)  //////vue使用插件，固定写法,这里是使用vue-router插件

export default new VueRouter({  ////////对外暴露，初始化构造函数
  routes: [/////////这里是路由规则
    {
      name: 'about',  //可有可无，在渲染to中会用到name
      path: '/about',  //url地址
      component: About  //上面url地址对应的组件，从其他页面引用的
    },
    {
      name: 'home',
      path: '/home',
      component: Home
    },
    {
      name: 'default',
      path: '/',                   ///访问根目录会访问/home
      redirect: '/home'
    },
    {
      name: 'content',  //动态配置路由
      path: '/content/:id',        ///在模板中使用{{$route.params.id}}
    },
  ]
})

3、在main.js注册路由，在vue实例中注册router，然后其他组件都可以使用该路由了

import Vue from 'vue'
import App from './App'
import router from './router/index.js'   /////在入口文件引入刚刚定义的路由组件

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router        ///////挂载路由，使用路由组件，固定写法，router: router,引入的名称,
})

3、在App.vue中使用路由

    <router-link to="/home">Home</router-link>  默认会被渲染成一个 <a> 标签 ， to就是我们定义的path地址
    <router-view></router-view>  路由匹配到的组件将渲染在这里

4、嵌套路由的使用，children，看下面的代码的注释

import Vue from 'vue' //要使用vue的路由插件必然先引用vue
import VueRouter from 'vue-router'   //引用vue组件，注意写法
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import List from '../pages/list.vue'
import Content from '../pages/content.vue'

Vue.use(VueRouter)  //////使用vue插件，固定写法

export default new VueRouter({  ////////对外暴露
  routes: [
    {
      name: 'about',
      path: '/about',
      component: About
    },
    {
      name: 'home',
      path: '/home',
      component: Home,
      children: [                        ////////嵌套路由,home下面的子路由
        {
          path: '/home/list',            ////path值中的'/'始终代表跟目录
          component: List
        },
        {
          path: 'content',               ///////简化写法，也可以/home/content
          component: Content
        },
        {
          path: '',                      ////////嵌套路由默认显示哪个
          redirect: '/home/list'
        }
      ]
    },
    {
      name: 'default',
      path: '/',
      redirect: '/home'
    }
  ]
})

5、缓存路由组件对象（切换的时候保留原先组件的信息，比如说一个页面包含注册和登录2个组件，注册用户填写一部分内容的时候不小心切换到登录组件，要想保留注册组件中填写的信息就需要用的keep-alive）

<keep-alive>

<router-view></router-view>

</keep-alive>

6、编程时导航

this.$router.push(path)相当于点击路有链接

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'content', params: { id: 1 }})
这个会查找我们在路由中定义name是content的地方，然后找到path,比如说我们在路由组件是这样定义的

// 带查询参数，变成 /content?id=1
    {
      name: 'content',  //动态配置路由
      path: '/content/:id',        ///在模板中使用{{$route.params.id}}
    }, 

// 带查询参数另外一个中方式，直接写path变成 /content?id=1
router.push({ path: 'content', query: { id: 1 },})

this.$router.replace(path)替换当前路由

this.$router.back()返回上一个记录的路由地址

this.$router.go(-1)跳转到某个路由地址