vue2.0 Learning notes Webpack-simple A simple routing configuration case in a template

The following is the completed directory structure

The case base is that a project named Vue_router has been created with WEBPACK+VUE-CLI and installed Vue-router

1. Defining Components

1.1 Create a component folder in the src directory First components, add two files home.vue and News.vue, the code is as follows:

Home.vue (first letter capitalization recommended)

< Template >    < H3 > Home </h3></template>

News.vue

< Template >    < H3 > News </h3></template>

　

1.2 Then create The configuration routing file router.config.js in the src directory , with the following code: 　　

Import home from './components/home.vue '  //Importing Components home'./components/news.vue '/  / Import Component News//  export default has the advantage that the module can randomly name the default  {    routes:[        {path} when importing again: '/home ', component:home},        {path:'/news ', component:news},        {path:' * ', redirect: '/ Home ' }    ]}

2. Introduce, create, Mount routes

In Main.js, modify the following:

Import vue from ' Vue 'Import Vuerouter from' Vue-router '//introduction of Vue-routerImport App from './app.vue 'Import Routerconfig from'./router.config.js '//Import Routing ConfigurationVue.use (Vuerouter); //using VuerouterConst ROUTER =NewVuerouter (Routerconfig);//Defining Vuerouter InstancesNewVue ({router,//Mount VuerouterEl: ' #app ', Render:h=h (App)})

vue2.0 Learning notes Webpack-simple A simple routing configuration case in a template