vue路由router-view用法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiejunna/article/details/82188392

此文件位置：myproject/src/router/index.js

// 0.如果使用模块化机制编程，导入Vue和VueRouter
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 1. 定义（路由）组件
const HelloWorld = { template: '<p>hello vue菜鸟教程</p>' }
const aa = { template: '<p>vue菜鸟教程aaaa</p>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
// http://localhost:8080/#/a/
// http://localhost:8080/#/hello/
// 浏览器访问路径中的#是因为在入口js文件中，如果你不更改设置的话
// vue会默认使用hash模式，该模式下回将路径格式化为 # 开头。
// 在创建的router对象中，如果不配置mode，就会使用默认的hash模式
// 该模式下将路径格式化为#！开头
// 添加mode后，浏览器访问
// http://localhost:8080/a
// http://localhost:8080/hello
const routes = [
  { path: '/hello', component: HelloWorld },
  { path: '/a', component: aa }
]

// 3. 创建 router 实例，然后传 `routes` 配置
export default new Router({
  mode: 'history',
  routes: routes
})

// 4. 在App.vue中router-view创建和挂载根实例
/*
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 4. router-view创建和挂载根实例-->
    <router-view/>
  </div>
</template>
*/