VueRouter总结

简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。详情去看官网

基本概念

• 1. 在【HTML】中使用

    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>

• 2. 在【组件】中使用

// Home.vue
export default {
  computed: {
    username () {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

• 3. 【动态路由】
     如果你想在路由上带参数，比如 /user/001 这种操作，可以参考 动态路由配置

• 3. 【编程式导航】
     如果你想在js代码中实现跳转可以考虑使用编程式导航
• 4. 【响应路由】
     例如：路径1：/user/001； 路径2：/user/002 。根据路由的不同复用原来的组件实例。这样子可以参考响应路由
• 5. 【重定向路由】
     路由重定向

其他用法还是去官网自己看呗。

常规用法

• 1.在根目录新建一个router的文件夹，写一个index.js文件，内容如下

import Vue from 'vue'
import Router from 'vue-router'
// 0、加载相关依赖包
Vue.use(Router)
// 1、引入组件
import Layout from '@/views/layout/Layout'
// 2、定义路由
export const constantRouterMap = [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '/',
          component: () => import('@/views/login/index')
        }
      ]
    }
]
// 3、创建
export default new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
  })

• 2.在根目录中找到main.js，配置如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'   //这里指向的是第一步中的index.js
import store from './store'

Vue.config.productionTip = false

new Vue({
  router, // 挂载到根实例
  store,
  render: h => h(App),
}).$mount('#app')

• 3.在根目录中找到App.vue，配置<router-view/>标签添加如下：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>


export default {
  name: 'app'
}
</script>