[JavaScript知识库]vue-路由的实现

1、编写页面导航，编辑App.vue，添加导航链接

<template>
  <div id="app">
    <ul>
      <li><router-link to="/login">登录</router-link></li>
      <li><router-link to="/reg">注册</router-link></li>
      <li><router-link to="/main">首页</router-link></li>
    </ul>
  </div>
</template>

2、页面中组件视图展示位置：编辑入口文件App.vue

<template>
  <div id="app">
    <ul>
      ...
    </ul>
    <hr>
    <!-- 页面视图展示位置 -->
    <router-view></router-view>			
  </div>
</template>

3、编写路由映射规则，创建路由模块：src/router/index.js

/**
 * 路由模块
 */
// 1、导入模块
import Vue from "vue"
import VueRouter from "vue-router"

// 2、注册模块
Vue.use(VueRouter)

// 3、定义映射规则
import Login from "../pages/Login"
import Register from "../pages/Register"
import Layout from "../pages/Layout"

const routes = [
    {path: "/login", component: Login},
    {path: "/reg", component: Register},
    {path: "/main", component: Layout}
]

// 4、创建路由对象
const router = new VueRouter({
    routes
})

// 5、导出路由对象
export default router

路由对象必须挂载到Vue实例上才能生效，编辑main.js挂载到router

import Vue from 'vue'
import App from './App.vue'
// 1、引入自定义路由模块
// import router from "./router/index.js"
// import router from "./router/index"
import router from "./router"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,         // 2、将路由对象挂载到实例上
}).$mount('#app')

注：.$mount('#app')意思是将vue实例挂载到id为app的标签上，等价于el:"#app"

npm run serve? ?----执行命令启动项目，测试路由访问是否正常?