浅谈vue-router(一)

简介:vue-router是Vue.js官方提供的路由插件，用于构建单页面应用
vue-router是基于组件的
路由用于设定特定的访问路径，讲路径和组件映射起来
在vue-router单页面应用中页面的路径改变就是组件之间来回切换

步骤一:
路由的安装 npm install vue-router --save
步骤二:
路由的使用
1.导入路由对象import... 并调用 Vue.use(...)
2.建立实例路由,配置映射路径
3.在根组件中挂载路由实例

import VueRouter from 'vue-router'//导入路由对象
import Home from '../views/Home.vue'

Vue.use(VueRouter)//安装路由插件

const routes = [//路径的配置 每一个路径选项都是一个对象
{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: () => import('../views/About.vue')//懒加载配置
}
]
const router = new VueRouter({
mode: 'history',//路由模式
base: process.env.BASE_URL,
routes
})

export default router//导出路由实例对象

路由的挂载

import Vue from 'vue'
import App from './App.vue'
import router from './router'//将路由实例导入

Vue.config.productionTip = false

new Vue({
  router,//在vue的根组件实例中传入路由
  render: h => h(App)
}).$mount('#app')