详解vue2路由vue

详解vue2路由vue

vue路由配置以及按需加载模块配置

1、首先在component文件目录下写俩组件：

First.vue:

Second.vue:

2、router目录下的index.js文件配置路由信息：

import Vue from 'vue'

import VueRouter from 'vue-router'

/*import First from '@/components/First'

import Second from '@/components/Second'*/

Vue.use(VueRouter)

/*const routes = [

//重定向

{

path:'/',

redirect:'first'

},

{

path: '/first',

name: 'First',

component: First

},

{

path: '/second',

name: 'Second',

component: Second

}

]*/

//懒加载路由

const routes = [

{ //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面

path:'/', //重定向，就是给它重新指定一个方向，加载一个组件；

component:resolve => require(['@/components/First'],resolve)

},

{

path:'/first',

component:resolve => require(['@/components/First'],resolve)

},

{

path:'/second',

component: resolve => require(['@/components/Second'],resolve)

}

//这里require组件路径根据自己的配置引入

]

//最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。

const router = new VueRouter({

routes

})

export default router;

3、main.js中引入路由配置文件：

import $ from 'jquery'

import Vue from 'vue'

import App from './App'

import router from './router' //引入路由配置文件

import './assets/css/bootstrap.min.css'

import './assets/js/bootstrap.min'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

router, // 注入到根实例中

render: h => h(App)

})

4、App.vue引入路由配置导航：

跳转第一个页面

跳转第二个页面

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。