vue-router路由

vue-router路由

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

安装

到项目目录下执行npm install vue-router --save-dev

–save-dev 表示保存到dev中

使用

1. 在src下建立router/index.js

index.js

import Vue from "vue"
//导入路由插件
import VueRouter from "vue-router";
import Main from "../components/Main"
import Content from "../components/Content";

Vue.use(VueRouter);
//编写路由插件
export default new VueRouter({
     
  routes: [
    {
     
      //路由路径
      path: "/main",
      //路由名称
      name: "main",
      //路由组件
      component: Main
    },{
     
      path: "/content",
      name: "content",
      component: Content
    }
  ]
});

​ 2.在mian.js中引用

import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描里面的路由配置

Vue.config.productionTip = false




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