vue-router
一. 基本操作
1.安装
npm install vue-router --save
2.解读核心文件
在src/router/index.js文件中,我们可以看到以下核心文件
// 定义路由配置
export default new Router({
routes: [ // 配置路由,这里是一个数组
{ // 每一个链接都是一个对象
path: '/', // 链接路径
name: 'HelloWorld', // 路由名称
component: () => import('@/views/orgStructure/position/list'), // 引入的模式 引入具体的组件路
}
]
})
3.路由属性详细说明
export default new Router({
mode: 'history', // 路由模式,取值可以为history和hash
base: '/', // 打包路径,默认为 / ,可以更改
routes: [
{
path: string, // 路由路径
component: Component, //页面组件
name: string; // 命名路由-路由名称
components: { [name: string]: Component }; // 命名视图组件
redirect: string | Location | Function; // 重定向
props: boolean | string | Function; // 路由组件传递参数
alias: string | Array<string>; // 路由别名
children: Array<RouteConfig>; // 嵌套子路由
beforeEnter?: (to: Route, from: Route, next: Function) => void; // 路由单独钩子
meta: any; // 自定义标签属性，比如：是否需要登录
icon: any; // 图标
// 2.6.0+
caseSensitive: boolean; // 匹配规则是否大小写敏感？(默认值：false)
pathToRegexpOptions: Object; // 编译正则的选项
}
]
})
二. 路由跳转
1. router-link标签跳转
在html标签内使用router-link跳转,相应于超链接a标签,使用方法如下
<router-link to="/">[显示字段]</router-link>
to: 导航路径
使用示例如下
<p>导航:
<router-link to="/"> 首页 </router-link>
<router-link to="/hello"> hello </router-link>
</p>
2. 编程式导航-JS代码内部跳转
js内部跳转页面,使用方法如下
this.$router.push('/xxx') // '/xxx'为router.js中定义的path路径
具体的简单用法
- 先编写一个按钮,在按钮上绑定
goHome()方法
<button @click="goHome">
回到首页
</button>
- 在
<script>模块中加入goHome方法,并用this.$router.push('/')到首页
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/home')
}
}
}
3. 其他常用方法
// 后退一步记录,等同于 history.back(),相当于浏览器的返回上一个页面按钮的功能
// 功能：加载历史列表中的前一个URL（后退）。
this.$router.go(-1)
// 在浏览器记录中前进一步,等同于 history.forward()
// 功能：加载历史列表中的下一个URL（前进）。
this.$router.go(1)
// 拓展
// history.go()
// 功能：加载历史列表中的某个具体的页面。
/*
-1代表前一个(forward)，0代表当前，1代表(back)后一个。
1(向后) <----- 0(当前) -----> -1(向前)
history.go(-1) == history.forward()
history.go(1) == history.back()
history.current, history.next
*/
三. 子路由-嵌套路由
子路由,也叫嵌套路由,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加<router-view/>来展现子页面信息,相当于嵌入iframe,具体看下面的示例
1. src/components/Home.vue(父页面)
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!--添加子路由导航 -->
<p>导航:
<router-link to="/home">首页</router-link>
<router-link to="/home/one">子页面1</router-link>
<router-link to="/home/two">子页面2</router-link>
</p>
<!-- 子页面展示部分 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
msg: 'Home Page!'
}
}
}
</script>
2. src/components/One.vue (子页面1)
<template>
<div class="hello">
<h1>
{{msg}}
</h1>
</div>
</template>
<script>
export default {
name: 'One',
data() {
return {
msg: 'Hi, I am One Page!'
}
}
}
</script>
3. src/components/Two.vue (子页面2)
<template>
<div class="hello">
<h1>
{{msg}}
</h1>
</div>
</template>
<script>
export default {
name: 'Two',
data() {
return {
msg: 'Hi, I am Two Page!'
}
}
}
</script>
4.src/router/index.js (路由配置)
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 默认页面重定向到主页
redirect: '/home'
},
{
path: '/home', // 主页路由
name: 'Home',
component: Home,
children: [
// 嵌套子路由
{
path: 'one', // 子页面1
component: One
},
{
path: 'two', //子页面2
component: Two
}
]
}
]
})
四. 路由传递参数
1. 通过<router-link>标签中的to传参
基本语法:
<router-link :to="{name:xxx, params: {key: value}}">valueString</router-link>
PS:上面to前边是带冒号,后边跟着的是一个对象形式的字符串
- name: 在路由配置文件中起的name值,叫做命名路由
- params: 要传的参数,他是对象形式,在对象里可以传递多个值
具体实例如下:
(1). 在src/components/Home.vue里面导航中添加如下代码:
<router-link :to="name: 'one', params:{username: 'test123'}">子页面1</router-link>
(2). 在src/router/index.js中添加如下代码,重点是name:
{
path: 'one', // 子页面1
name: 'one', // 路由名称-命名路由
component: One
}
(3). 在src/components/One.vue里面接受参数,代码如下:
<h2>
{{ $route.params.username }}
</h2>
2. url中传递参数
(1). 在路由中以冒号传递,在src/router/index.js中加入如下代码
{
path: 'home/two/:id/:name', // 子页面2
component: Two
}
(2). 接受参数: 在src/components/Two.vue中加入如下代码
<p>
ID: {{ $route.params.id }}
</p>
<p>
名称: {{ $route.params.name }}
</p>
(3). 路由跳转: 在src/components/Home.vue中加入如下代码
<router-link to="/home/two/1/张三">子页面2</router-link>
PS: to前面没有冒号为字符串路由,必须全部匹配
(4). 如果路由参数需要有特定的规则,就需要加入正则表达式了,示例如下
{
path: '/home/two/:id(\d+)/:name', // 子页面2
component: Two
}
3. 编程式导航 - params传递参数
(1). 在src/router/index.js中加入如下代码
{
path: '/home/three', // 子页面3
name: 'three',
component: Three
}
(2). 在src/components/Three.vue页面
<p>
ID: {{ $route.params.id }}
</p>
<p>
名称: {{ $route.params.name }}
</p>
(3). 在src/components/Home/vue页面
<template>
<button @click="toThreePage">
页面3 - params传参
</button>
</template>
<script>
methods: {
toThreePage() {
this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
}
}
</script>
说明:
- 动态路由使用params传递参数,在
this.$router.push()方法中path不能和params一起使用.否则params将无效.需要用name
来指定页面.
- 以上方式参数不会显示到浏览器的地址栏中,如果刷新一次页面,就获取不到参数了,改进方式将第一步中的代码改成如下:
{
path: '/home/three/:id/:name', //子页面3
name: 'three',
component:
}
4. 编程式导航 - query传递参数
(1). 在src/router/index.js页面加入如下代码
{
path: '/home/three', // 子页面3
name: 'three',
components: Three
}
(2). 在src/components/Three.vue页面加入如下代码
<p>
ID: {{ $route.query.id }}
</p>
<p>
名称: {{ $route.query.anme }}
</p>
(3). 在src/components/Home.vue中加入如下代码
<button @click="toThreePage">
页面3 - params传参
</button>
methods: {
toThreePage() {
this.$router.push({path: '/home/three', query: { id: 1, name: '张三'}})
}
}
PS: 动态路由使用query传递参数,会显示到浏览器地址栏中,以上链接为/home/three?id=1&name=张三
五. 命名路由 - 命名视图 - 重定向 - 别名
1. 命名路由
给一个路由命一个唯一的名称, 然后跳转调用这个名称即可
(1). 在src/router/index.js 中加一个带name的路由,代码如下
{
path: 'one', //子页面1
name: 'one', // 路由名称-命名路由
component: One // 页面组件
}
(2). 在src/component/Home.vue页面中调用
<router-link :to="{name: 'one'}">子页面1</router-link>
router.push({ name: 'user' })
未完结...正在更新...
