npm install vue-router --save
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: ' '
})
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; // 编译正则的选项
}
]
})
<router-link to="/">[显示字段]</router-link>
<p>导航 :
<router-link to="/">首页</router-link>
<router-link to="/hello">hello</router-link>
</p>
this.$router.push('/xxx')
<button @click="goHome">回到首页</button>
模块里加入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)
children
后跟路由数组来实现,数组里和其他配置路由基本相同path
和component
,然后在相应部分添加
来展现子页面信息,相当于嵌入iframe
。具体看下面的示例:
<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>
<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>
<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>
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
},
]
}
]
})
标签中的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>
src/router/indes.js
中添加如下代码,重点是name
:{
path:'one', // 子页面1
name: 'one', // 路由名称-命名路由
component:One
}
src/components/One.vue
里面接受参数,代码如下:
<h2>{{$route.params.username}}</h2>
src/router/index.js
中加入如下代码:{
path:'/home/two/:id/:name', // 子页面2
component:Two
},
src/components/Two.vue
中加入如下代码:
<p>ID:{{ $route.params.id}}</p>
<p>名称:{{ $route.params.name}}</p>
src/components/Home.vue
中加入如下代码:
<router-link to="/home/two/1/张三">子页面2</router-link>
{
path:'/home/two/:id(\\d+)/:name', // 子页面2
component:Two
}
params
传递参数src/router/index.js
页面加入如下代码:{
path:'/home/three', // 子页面3
name: 'three',
component:Three
}
src/components/Three.vue
页面加入如下代码:
<p>ID:{{ $route.params.id}}</p>
<p>名称:{{ $route.params.name}}</p>
src/components/Home.vue
中加入如下代码:
// template
<button @click="toThreePage">页面3-params传参</button>
// script
methods: {
toThreePage() {
this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
}
}
this.$router.push()
方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。{
path:'/home/three/:id/:name', // 子页面3
name: 'three',
component:Three
}
query
传递参数src/router/index.js
页面加入如下代码:{
path:'/home/three', // 子页面3
name: 'three',
component:Three
}
src/components/Three.vue
页面加入如下代码:
<p>ID:{{ $route.query.id}}</p>
<p>名称:{{ $route.query.name}}</p>
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'}
})
}
}
/home/three?id=1&name=zhangsan