27

vue-router路由安装与使用

 3 years ago
source link: https://my.oschina.net/u/4891736/blog/4814971
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
vue-router路由安装与使用 - zy1281539626的个人空间 - OSCHINA - 中文开源技术交流社区

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”。

本文同步分享在 博客“zy1281539626”（CSDN）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK