vue router基础回顾

01 组册路由插件

        注册前需要做一些准备工作，需要在src/views目录下创建我们的路由页面组件：Home.vue和About.vue。

// Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

vue页面组件创建没什么好说的，按照vue的单文件组件编写方式进行编写即可。这里只是简单的演示。

02 紧接着我们需要创建Vue Router对象实例, 这里我们把router对象单独抽取到一个router.js的文件中，以便后续的管理。
 

//router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
// 1、注册路由插件
// Vue.use是用来注册插件的，它会调用传入对象对的install方法
Vue.use(Router)

// 3、创建并暴露Router对象实例
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  // 2、编写创建路由规则数组
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

1、注册路由插件: Vue.use是用来注册插件的，它会调用传入对象对的install方法， 或者是一个函数

Vue.use(Router)

2、定义路由规则 routes
        它是一个数组，数组里是一个个的路由规则，如下所示：

{
    path: '/about',
    name: ‘About’,
    component: About // 静态导入
    // 或者 component: ()=>import(/* webpackChunkName: 'blog' */'../views/About.vue') // 动态导入分包的方式
}

3、创建路由对象 router

new VueRounter({
  routes,
  mode: 'history',
  base: process.env.BASE_URL
})

这里传入的routes是上边的路由规则数组。

4、因为这里是在单独模块中，所以需要export default router 供外部使用。
5、在main.js中导入定义好的router，并在创建Vue实例的时候传入router，也就是需要在Vue实例中注册router对象；

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

完整代码文件如下：

import Vue from 'vue'
import App from './App.vue'
// 4-1、导入路由对象
import router from './router'

Vue.config.productionTip = false
// 4-2、创建Vue实例对象并挂载到页面上
new Vue({
  // 4-3、注册router对象
  router,
  render: h => h(App)
}).$mount('#app')

通过这一步的router对象的注册，相当于给vue实例挂载了以下一些属性：
 vm.$route 路由规则
 vm.$router 路由对象，里面有currentRoute，可以在注入到其他组件中获取到当前的路由规则信息。

6、在App.vue的template中添加<router-view>标签，也就是需要创建路由组件的占位符。有需要的话，还可以在页面上创建一些可触发路由跳转的<router-link to='/about'>。
         App.vue文件，同时给我们的vue实例提供了一个挂载节点div#app，以及HTML页面的一些其他基础信息。具体如下：

<template>
  <div id="app">
    <div id="nav">
      <!-- 06 创建跳转路由 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!-- 05 创建路由组件占位符 -->
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 03 步骤总结：

1. 创建跟路由想关的组件（视图）
2. 要去注册路由插件，我们利用Vue.use(Router)来注册Vue Router。
3. 要创建一个Router对象实例router，在创建Router对象是我们需要配置一些路由规则routes。
4. 需要去注册router对象，也就是我们在创建Vue实例vm的时候，我们要在选项里边来配置我们创建好的router对象。
5. 通过在App.vue上使用<router-view>标签来设置路由视图组件的占位符。当我们的路经匹配成功之后，把路由规则中匹配到的视图组件拿来替换掉router-view这个位置。
6. 通过<router-link to='xxx'>标签来创建一些链接，以便我们可以手动触发页面的路径跳转。

        以上便是我们本文对vue-router插件的基本使用方式的一些基础的回顾，如有疏漏，欢迎评论赐教。感谢您的耐心观看与学习。