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: `
    <div>
      <router-view></router-view>
    </div>
    `,
});

4. 创建vue组件 User.vue

<template>
<!--NOTE: here is 'route',not 'router'-->
  <div>User--> {{this.$route.params.id}}</div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
            }
        },
    }
</script>

<style scoped>

</style>

5. 创建HelloWorld.vue

<template>
  <div>
    <router-link to="/e/user/foo">/user/foo</router-link>
    <router-view></router-view>//加入这个就是本页面跳转，不加就跳转到下个页面
  </div>
</template>

<script>
    export default {
        name: "HelloWorld"
    }
</script>

<style scoped>

</style>