vue-router学习笔记

vue-router

vue-router是帮助vue作为一个单页面应用在页面内进行路由跳转的。
我们先安装vue-router，当然也可以在vue-cli构建项目时选择自动安装。

npm install vue-router --save-dev

安装完成之后导入vue-router组件
如果是自动安装的话src下会有一个router目录，里面有一个index.js。这是路由的配置文件。如果没有需要手动创建。
index.js

import Vue from 'vue'
import Router from 'vue-router'
import Content from "../components/Content";
//导入组件

Vue.use(Router)
//显式声明router组件

export default new Router({
  routes: [
    {//路由的基本配置
      path: '/content',
      name: 'Content',
      component: Content
    }
  ]
})

在main.js中导入vue-router

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//导入vue-router

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

接下来就可以在App.vue中使用了

    <router-link to="/content">内容页</router-link>
    <router-view/>
    //这一行相当于是显示上面内容的占位符，没有这一行就显示不出组件了