21. The modular routing

Modular Routing

New router directory under the project directory, create a directory in the router router.js directory, and then reference vue

Import View from 'view';

Routing section main.js then copied to router.js shear, followed by

export default router;

Exposing

router.js

Import View from 'view' ;


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

// 1. Create assembly, import component 
Import from Home '../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. Configure Route 
const routes = [
  　　{path:'/home',component:Home},
  　　{path:'/news',component:News},
      path {: '/ vcontent /: AID', Component: vContent}, // Dynamic Routing 
      {path: '*', the redirect: '/ Home'}, // default route goto 
      {path: '/ goods' , component: Good},

      {
        path:'/user',
        component:User,
        children:[
          {path:'adduser',component:AddUser},
          {path:'userlist',component:UserList}
        ]
      },
     
]
// note that this is routes, rather than routers

// 3. Examples of VueRouter 
const = Router new new VueRouter ({
      MODE: 'history', // the hash to history mode 
  　　routes // (abbreviation) corresponds Routers: Routers 
})


export default router;

Then in reference router.js in main.js

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

main.js

Import View from 'view' ;
import App from './App.vue';

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


// Use the element-UI 
Import from ElementUI 'UI-Element' ;
import 'element-ui/lib/theme-chalk/index.css';
Vue.use (components);


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

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

// 5. <router-view> </ router -view> placed inside App.vue