vue路由router-view用法
此文件位置:myproject/src/router/index.js// 0.如果使用模块化机制编程,导入Vue和VueRouterimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 1. 定义(路由)组件const HelloWorld = { template: '<p>hel
·
此文件位置: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>
*/
更多推荐
已为社区贡献16条内容
所有评论(0)