vue-router路由安装与使用
1.vue-router路由安装在当前项目根目录运行npm install vue-router --save-dev2.在App.vue增加 router-view标签这里是路由页面的显示区域:<router-view></router-view>3.新建router文件夹,新建index.jsimport ...
·
1.vue-router路由安装
在当前项目根目录运行
npm install vue-router --save-dev
2.在App.vue增加 router-view标签
这里是路由页面的显示区域:
<router-view></router-view>
3.新建router文件夹,新建index.js
import Vue from 'vue'
import Router from 'vue-router'
import Pos from 'components/Pos'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Pos',
component: Pos
}
]
})
4.在main.js中引入 router/index.js
import router from './router'
(如果文件名是index.js则可以省略 /index.js)
import router from './router/router.js'
(如果文件名是其他则需要写全)
5.注意事项
路由配置:
<router-view name="left"></router-view>
<router-view></router-view>
routes: [
{
path:'/',
name:'hi',
components:{
default: Hello,
left: Hi
}
}
]
1.有children子路由的不要写name;
2.default是配置没有name属性的router-view区域的内容;
3.component个数为多个的时候参数名加”s” => “components”,单个的时候不要加“s”。
更多推荐
已为社区贡献12条内容
所有评论(0)