(一)router-link 和 router-view 组件
1 . vue-router作为一个插件把它引进来,new Router创建一个路由实例,传一个路由列表
2 . router-link 其实是封装了一个a 标签
3 . 一个基本的路由对象,必须包含2个属性: path,component
4 . 当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
(二)路由配置
动态路由
5 .创建一个路由对象,name 就是一个动态路由参数
import Home from '../views/Home.vue'
export default [{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/argu/:name',
component: () => import('@/views/argu.vue')
}
]
argu.vue
<template>
<div>
This is Argu
{{$route.params.name}}
</div>
</template>
<script>
export default {
//
}
</script>
改变url 动态参数 name 就可以改变页面显示的内容
$route 代表当前页面加载的对应的路由对象,它里面包含一个params 参数对象有一个name 的属性
嵌套路由
6 . 创建一个 Parent.vue 嵌套 Child.vue 的组件和路由配置项 对象
import Home from '../views/Home.vue'
export default [{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/argu/:name',
component: () => import('@/views/Argu.vue')
},
{
path: '/parent',
component: () => import('@/views/Parent.vue'),
children: [
{
path: 'child',
component: () => import('@/views/Child.vue')
}
]
}
]
a.Parent.vue
<template>
<div>
This is Parent
<router-view></router-view>
</div>
</template>
<script>
export default {
//
}
</script>
<style>
</style>
b.child.vue
<template>
<div>
This is child
</div>
</template>
<script>
export default {
//
}
</script>
<style>
</style>
命名路由
a.App.vue 下,v-bind: to , 绑定一个对象
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link v-bind:to="{ name: 'about' }">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="stylus">
#app
font-family 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
text-align center
color #2c3e50
#nav
padding 30px
a
font-weight bold
color #2c3e50
&.router-link-exact-active
color #42b983
</style>
b.路由列表中添加一个 name 属性
import Home from '../views/Home.vue'
export default [{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/argu/:name',
component: () => import('@/views/Argu.vue')
},
{
path: '/parent',
component: () => import('@/views/Parent.vue'),
children: [
{
path: 'child',
component: () => import('@/views/Child.vue')
}
]
}
]
命名视图
如果我们想在一个页面中显示多个视图(多个router-view ),而且像让他显示在指定的位置
import Home from '../views/Home.vue'
export default [{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/argu/:name',
component: () => import('@/views/Argu.vue')
},
{
path: '/parent',
component: () => import('@/views/Parent.vue'),
children: [
{
path: 'child',
component: () => import('@/views/Child.vue')
}
]
},
{
path: '/named_view',
components: {
default: () => import('@/views/Child.vue'),
email: () => import('@/views/Email.vue'),
tel: () => import('@/views/Tel.vue'),
}
}
]
(三)JS操作路由
编程式的导航
(四)重定向和别名
a. 重定向
import Home from '../views/Home.vue'
export default [{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/argu/:name',
component: () => import('@/views/Argu.vue')
},
{
path: '/parent',
component: () => import('@/views/Parent.vue'),
children: [
{
path: 'child',
component: () => import('@/views/Child.vue')
}
]
},
{
path: '/named_view',
components: {
default: () => import('@/views/Child.vue'),
email: () => import('@/views/Email.vue'),
tel: () => import('@/views/Tel.vue'),
}
},
{
path: '/main',
// redirect: '/'
// redirect: {
// name: 'home'
// }
// redirect: to => {
// console.log(to)
// }
// redirect: to => {
// return {
// name: 'home'
// }
// }
// redirect: to => {
// return '/'
// }
redirect: to => '/'
}
]
b.别名
import Home from '../views/Home.vue'
export default [{
path: '/',
name: 'home',
alias: '/home_page',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/argu/:name',
component: () => import('@/views/Argu.vue')
},
{
path: '/parent',
component: () => import('@/views/Parent.vue'),
children: [
{
path: 'child',
component: () => import('@/views/Child.vue')
}
]
},
{
path: '/named_view',
components: {
default: () => import('@/views/Child.vue'),
email: () => import('@/views/Email.vue'),
tel: () => import('@/views/Tel.vue'),
}
},
{
path: '/main',
// redirect: '/'
// redirect: {
// name: 'home'
// }
// redirect: to => {
// console.log(to)
// }
// redirect: to => {
// return {
// name: 'home'
// }
// }
// redirect: to => {
// return '/'
// }
redirect: to => '/'
}
]
网友评论