21.路由模块化

玩蛇的胖纸

发布于 2019-10-21 10:17:26

44900

代码可运行

文章被收录于专栏：雪胖纸的玩蛇日常雪胖纸的玩蛇日常

运行总次数：0

代码可运行

路由模块化

在项目目录下新建目录router，在目录router目录下新建router.js，然后引用vue

import Vue from 'vue';

然后将main.js中的路由部分剪切复制到router.js中，然后通过

export default router;

将其暴露

router.js

import Vue from 'vue';


import VueRouter from 'vue-router';
Vue.use(VueRouter)

// 1.创建组件，导入组件
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import vContent from '../components/vContent.vue';
import Good from '../components/Goods.vue';

import User from '../components/User.vue';
import AddUser from '../components/User/AddUser.vue';
import UserList from '../components/User/UserList.vue';

// 2.配置路由
const routes=[
  　　{path:'/home',component:Home},
  　　{path:'/news',component:News},
      {path:'/vcontent/:aid',component:vContent}, //动态路由
      {path:'*',redirect:'/home'}, //默认路由跳转到首页
      {path:'/goods',component:Good},

      {
        path:'/user',
        component:User,
        children:[
          {path:'adduser',component:AddUser},
          {path:'userlist',component:UserList}
        ]
      },
     
]
//注意，这里是routes，而不是routers

// 3.实例化VueRouter
const router=new VueRouter({
      mode:'history',//hash改为history模式
  　　routes//(缩写)相当于routers:routers
})


export default router;

然后在main.js中引用router.js

import router from './router/router.js'

main.js

import Vue from 'vue';
import App from './App.vue';

import VueResource from 'vue-resource';
Vue.use(VueResource)


// element-UI 的使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


import router from './router/router.js'

// 4.挂载
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

// 5.将<router-view></router-view>放在App.vue里面