教你使用Vue路由

Vue路由vue-router是官方提供的一个插件，Vue要使用插件必须先安装插件。

安装插件

npm install vue-router --save

–save是保存安装路由信息到package.json,默认为dependencies节点中。

代码中安装路由插件以及创建路由对象。

这部分写在router/index.js中

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "../components/Home";
import About from "../components/About";
 
// 1. 安装插件
Vue.use(VueRouter)
 
const routes = [
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: "/home",
    component: Home
  },
  {
    path: "/about",
    component: About
  }
]
 
// 2. 创建路由对象
const router = new VueRouter({
  routes
});
 
// 3. 导出router
export default router;

router对象创建完并导出之后，需要再main.js中挂载路由对象。
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'    //导入路由对象。当导入目录下的index.js，可以省略index.js，因为导入 './router'，其实是导入 './router/index.js'
 
 
Vue.config.productionTip = false
 
new Vue({
  router,　　// 挂载路由对象，必须将路由对象挂载到vue实例中
  render: h => h(App),
}).$mount('#app')

使用路由

vue-router提供了两个标签：
　1. < router-link> 可以切换浏览器中的地址
　2. < router-view> 根据浏览器中的地址，动态渲染地址对应的组件，这个对应关系在 router/index.js中配置
由于main,js中

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

默认是render App.vue组件，所以router-link和router-view要写在App.vue组件中。
App.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>　　<!-- 这里控制浏览器地址的内容 -->
    <router-link to="/about">关于</router-link>
    <router-view></router-view>　　<!-- vue根据浏览器的地址，将对应的组件渲染到该位置 -->
  </div>
</template>
 
<script>
 
export default {
  name: 'App',
  components: {
     
  }
}
</script>
 
<style>
 
</style>

到此就实现了首页和关于页面的切换