Vue-router 管理路由

1. Vue-router的安装

通过项目根目录下package.json文件引入vue-router

"dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.2.1",
}

在cmd中使用npm install安装

安装成功后，在项目中node_modules下能找到vue-router文件夹，这样vue-router就被成功安装了

在main.js中通过import引入vue-router组件，并把组件命名为VueRouter

import VueRouter from 'vue-router';

2. Vue-router的使用

我们在main.js中通过Vue的use方法调用VueRouter

Vue.use(VueRouter);

接着在main.js中实例化一个VueRouter，并命名为router。这时我们引入两个组件Page1和Page2，通过routes设置每个路由的跳转路径及组件名

import Page1 from './components/page1.vue'
import Page2 from './components/page2.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/page1',
      component: Page1
    },
    {
      path: '/page2',
      component: Page2
    }
  ]

接着我们将实例化好的router对象绑定到Vue中，并通过render渲染到App这个组件（即项目中的App.vue）

const app = new Vue({
  el: '#app',
  router,
  render: h => h(App)

})

在App.vue中，我们用标签设置跳转页面的超链接（作用相当于a 标签），我们用标签来承载Page1和Page2显示的内容。

页面1
页面2

这样一系列操作后，我们就实现了使用vue-router完成单页面应用

点击页面1，访问路径会跳转到page1并且在下方显示page1的内容

点击页面2，访问路径会跳转到page2并且在下方显示page2的内容