一、路由配置及加载
- 安装
npm install --save vue-router - 引用
import VueRouter from ‘vue-router’;
Vue.use(VueRouter); - 配置路由文件
组件配置方式A: import HelloWorld from './components/HelloWorld'; var router = new VueRouter({ routes:[{ path: '/hello',, component:HelloWorld }] }) 组件配置方式B: var router = new VueRouter({ routes:[{ path: '/hello', component: (resolve) => require(['./components/HelloWorld.vue'], resolve) }] }) new Vue({ el: '#app', template: '<App/>', router: router, components: { App } })
- 父页面设置视图加载区域
添加此标签:< router-view></ router-view>
二、封装router.js
- 将路由配置放入router.js文件
//引入相关基础 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); //配置路由地址及模式 const routers = [ { path: '/hello', meta: { title: '' }, component: (resolve) => require(['./components/HelloWorld.vue'], resolve) } ]; var RouterConfig = { mode: 'history', //history模式下去除#号,hash模式下有#号。默认为hash模式 routes: routers }; var router = new VueRouter(RouterConfig); //导出供外部访问 export default router;
- 在main.js中引用
import Routers from './router.js'; new Vue({ //1.初始化页面 el: '#app', template: '<App/>', router: Routers, components: { Main } })
三、路由跳转
1.