Vue实战:浅谈如何使用VueRouter

Vue实战:浅谈如何使用VueRouter

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

用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。

先看一个项目目录结构:
Vue实战:浅谈如何使用VueRouter

先看入口文件 main.js:
Vue实战:浅谈如何使用VueRouter
其中:

  1. 通过import Vue from 'vue'引入Vue

  2. 通过import VueRouter from 'vue-router'引入Vue Router

  3. 通过import routes from './routes'引入路由列表

  4. 通过Vue.use(VueRouter)调用Vue Router

  5. 通过 const router = new VueRouter({//mode:'history', routes, }) 创建 router 实例,然后传 routes 配置

  6. 通过new Vue({router}).$mount('#app')创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能

再看路由文件 routes.js:
Vue实战:浅谈如何使用VueRouter
其中:
​ 通过 import RouterDemo from './components/RouterDemo'import RouterChildrenDemo from './components/RouterChildrenDemo'引入两个组件

再看App.vue文件:
Vue实战:浅谈如何使用VueRouter
再看RouterDemo.vue :
Vue实战:浅谈如何使用VueRouter
再看RouterChildrenDemo.vue :
Vue实战:浅谈如何使用VueRouter