vue路由router-view用法

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

// 0.如果使用模块化机制编程,导入Vue和VueRouter
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 1. 定义(路由)组件
const HelloWorld = { template: '

hello vue菜鸟教程

'
} const aa = { template: '

vue菜鸟教程aaaa

'
} // 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创建和挂载根实例 /* */

你可能感兴趣的:(vue-js)