Vue2---router(配置路径、路由跳转、相关API、多级路由、路由守卫，两种工作模式)

Vue2—router(配置路径、路由跳转、相关API、多级路由、路由守卫，两种工作模式)

安装

cnpm install -S vue-router

配置路径

创建文件：src/router/index.js

// index.js
import VueRouter from 'vue-router' // 导入router
import LoginView from '@/views/Login.vue' // 导入组件

Vue.use(VueRouter) // 使用插件

// 创建路由
const routes = [
  {
   
    path: '/login',	// 组件路径
    name: 'login',	// 组件名
    component: LoginView	// 组件实例
  },
]

// 创建router实例 以及设置配置
const router = new VueRouter({
   
  mode: 'history', // 路由模式 history不带#，hash带#
  base: process.env.BASE_URL, // 基础url为BASH_URL
  routes // 引入routes变量存放路由信息
})

main.js 中使用

// main.js
import router from './router' // 引入

new Vue({
   
  router, // 装载router
  store,
  render: h => h(App)
}).$mount('#app')

路由跳转

路由跳转参数根据组件配置的路由而定：

不携带参数跳转

// js跳转
this.$router.push('/login')	// 根据路径
this.$router.push('login')	// 根据组件名
// 对象写法
this.$router.push({
   name:'login'})
this.$rout