admin管理员组文章数量:1634481
1、快速入门
一、简单介绍
- vue-router是vue官方的路由解决方案,简单易用
二、安装
- vue-router是一个插件包,需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装,也可以自己使用命令安装:
npm install vue-router --save
三、解读核心文件
- 用vue-cli构建项目之后,在
src/router/index.js
文件中,看到以下的路由核心文件:
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入页面组件,命名为HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定义路由配置
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称,
component: HelloWorld //对应的组件模板
}
]
})
四、使用
- 在系统入口文件
main.js
中注入router,代码如下:
// 引入vue框架
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置
import router from './router'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false
// 定义实例
new Vue({
el: '#app',
router, // 注入框架中
components: { App },
template: '<App/>'
})
2、路由属性配置说明
export default new Router({
mode: 'history', //路由模式,取值为history与hash
base: '/', //打包路径,默认为/,可以修改
routes: [
{
path: string, //路径
ccomponent: 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; // 编译正则的选项
}
]
})
3、页面跳转
一、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>
二、编程式导航-JS代码内部跳转
- 实际项目中,很多时候都是通过在JS代码内部进行导航的跳转,使用方式如下:
this.$router.push('/xxx')
- 具体的简单用法:
- (1)先编写一个按钮,在按钮上绑定goHome( )方法。
<button @click="goHome">回到首页</button>
- (2)在
<script>
模块里加入goHome方法,并用this.$router.push(‘/’)
导航到首页
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/home');
}
}
}
三、其他常用方法
// 后退一步记录,等同于 history.back()
this.$router.go(-1)
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
4、子路由-路由嵌套
- 子路由,也叫路由嵌套,采用在
children
后跟路由数组来实现,数组里和其他配置路由基本相同 - 需要配置
path
和component
,然后在相应部分添加<router-view/>
来展现子页面信息,相当于嵌入iframe
。具体看下面的示例:
一、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>
<style scoped>
</style>
二、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>
<style scoped>
</style>
三、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>
<style scoped>
</style>
四、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
},
]
}
]
})
五、效果图
5、路由传递参数
一、通过<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/indes.js
中添加如下代码,重点是name
:
{
path:'one', // 子页面1
name: 'one', // 路由名称-命名路由
component:One
}
- (3)在
src/components/One.vue
里面接受参数,代码如下:
<h2>{{$route.params.username}}</h2>
二、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
}
三、编程式导航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>
// script
methods: {
toThreePage() {
this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
}
}
- 说明:
- A、动态路由使用params传递参数,在
this.$router.push()
方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。 - B、以上方式参数不会显示到浏览器的地址栏中,如果刷新一次页面,就获取不到参数了,改进方式将第一部中的代码改成如下:
{
path:'/home/three/:id/:name', // 子页面3
name: 'three',
component:Three
}
四、编程式导航query
传递参数
- (1)在
src/router/index.js
页面加入如下代码:
{
path:'/home/three', // 子页面3
name: 'three',
component:Three
}
- (2)在
src/components/Three.vue
页面加入如下代码:
<p>ID:{{ $route.query.id}}</p>
<p>名称:{{ $route.query.name}}</p>
- (3)在
src/components/Home.vue
中加入如下代码:
// template
<button @click="toThreePage">页面3-params传参</button>
// script
methods: {
toThreePage() {
this.$router.push({
path: '/home/three',
query: {id: 1, name: 'zhangsan'}
})
}
}
- PS:动态路由使用query传递参数,会显示到浏览器地址栏中,以上链接为
/home/three?id=1&name=zhangsan
版权声明:本文标题:Vue-Router(一)路由配置-页面跳转-子路由-路由传递参数 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729176428a1188776.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论