路由 - vue路由实现步骤 - 《vue》

vue-router.js
<body>
    <!-- 步骤一: 在vue之后导入vue-router路由插件 -->
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <script src="./vue-router.js"></script>
    <div id='myApp'>
        <!-- 步骤二: 在根组件模板中,添加路由跳转标签 -->
        <a href="#/main">主页</a> |
        <a href="#/login">登录</a> |
        <a href="#/user">用户</a>
        <!-- 步骤六: 在根组件模板中, 添加路由出口: 路由组件渲染的位置 -->
        <router-view></router-view>
    </div>
    <script>
        // 步骤三: 创建路由控制分发跳转的组件
        var MainPage = Vue.component("mainCom", {template: "<h1>这是主页</h1>"});
        var LoginPage = Vue.component("loginCom", {template: "<h1>这是登录页</h1>"});
        var UserPage = Vue.component("userCom", {template: "<h1>这是用户页</h1>"});
        // Vue.component 返回值是组件的构造函数
        console.log(MainPage, LoginPage, UserPage) 
        // 步骤四: 创建路由对象,配置路由信息
        const router = new VueRouter({
            // 在routes子字段下配置路由, 一个对象就一个路径的信息, 
            // path路径对应的是hash值,省略#, 一般以/开头
            // component 值是路由对应的组件构造函数, 不是组件名
            routes:[
                {path: "/main", component: MainPage},
                {path: "/login", component: LoginPage},
                {path: '/user', component: UserPage}
            ]
        })
        new Vue({
            el: '#myApp',
            // 步骤五: 把路由对象加入vue对象中
            router,
            data: {}
        })
    </script>
</body>