vue-router路由安装与使用

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

vue-router路由安装与使用相关推荐

Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue | Vue Router 路由的使用
文章目录一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
vue项目没有router文件夹_vue项目——Vue Router路由的使用
前言: 学习vue也有一段时间了,这里把学习整个vue项目中的一些知识点和问题,整理下方便自己记录,也希望给大家带来方便.我会连续写几篇系统的文章,讲解一个完整的vue项目中用到的各个使用模块.今天先 ...
Vue Router路由管理器
目录: 相关理解基本路由几个注意事项嵌套(多级)路由路由的query参数命名路由路由的params参数路由的props配置路由跳转的replace方法编程式路由导航缓存路由组件 a ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...
Vue Router路由模式的区别进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...

vue-router路由安装与使用

vue-router路由安装与使用相关推荐

最新文章

热门文章