VueRouter的简单使用

1. 有一个HTML文件里的DOM元素（的id）作为vue实例挂载的入口；

2.创建VueRouter文件；

import Vue from 'vue';
import VueRouter from 'vue-router';//import VueRouter
import HelloWorld from '../components/HelloWorld';
import User from '../components/User';

Vue.use(VueRouter);// use VueRouter
//create VueRouter
export default new VueRouter({
    routes: [
        {
            path: '/',//root path
            component: HelloWorld,
        },
        {
            path: '/user/:id',//dynamic path
            component: User,
        }
    ],
});

3. 创建Vue入口文件

import Vue from 'vue';
import router from './router/index'
new Vue({
    el:'#app',//mount point ,id of dom element in html
    router,//the VueRouter in step2

    //<--!router view,will be fulfilled by content of User.vue-->
    template: `
    

      
    
    `,
});

4. 创建vue组件 User.vue

5. 创建HelloWorld.vue