Vue路由的使用

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

一、安装插件

npm install vue-router --save

--save 是保存配置信息到 pacjage.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.

　　2.

根据浏览器中的地址，动态渲染地址对应的组件，这个对应关系在 router/index.js中配置

可以切换浏览器中的地址

由于main.js中

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

默认是render App.vue组件，所以和要写在App.vue组件中

App.vue

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