Vue2中vue-router使用全流程

一、router文件夹下的index.js文件中配置vue-router

//引入vue以及vueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

//第三方库需要use一下才能用
Vue.use(VueRouter)

//定义routes路由的集合，数组类型
const routes = [
  {
    path: '/login',
    name: 'login',
    meta: {
      index: 2
    },
    component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
  },
  {
    path: '/user',
    name: 'user',
    meta: {
      index: 1
    },
    component: () => import(/* webpackChunkName: "user" */ '../views/User.vue'),
  }
]

//实例化VueRouter并将routes添加进去
const router = new VueRouter({
  //hash模式路由
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

//抛出这个这个实例对象方便外部读取以及访问
export default router

二、router注册到main.js里

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  //router要注册到main里，并且挂载到根实例app上，让整个应用都能看见路由
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三、在App.vue里显示

<template>
  <div id="app">
  	  //路由匹配的组件将渲染在这里
  	  <router-view class="router-view" />
  </div>
</template>

四、在各组件里愉快跳转

<template>
	//通过传入 `to` 属性指定链接
	<router-link tag="span" to="./login" v-if="!isLogin">登录</router-link>
    <router-link tag="span" to="./user" v-else>
</template>