vue-router的简单使用
#1 安装vue-router
:
npm install vue-router --save
#2 在src文件夹下新建router
目录,在该目录下新建一个index.html
文件
#3 在刚才创建的index.html文件中写入如下代码:
import VueRouter from 'vue-router'
import Vue from 'vue'
// 1. 通过vue.use(插件),安装插件。vue-router是一个插件,而任何插件在使用之前都要使用vue.use()安装
Vue.use(VueRouter)
// 2.创建VueRouter对象
const routes = [ //url映射
}
const router = new VueRouter({
routes,
})
// 3.将router对象传入到Vue实例中
export default router
// 4.在Vue实例所在的js文件下,如main.js,导入router
import router from './router/index'
new Vue({
el:'#app',
router,
render:h => h(app)
})
通过以上三步,vue-router的架子基本就已经搭建出来了,如果通过脚手架来构建项目的话,那么上面的步骤其实都可以自动完成,接下来介绍如何使用vue-router。
注意到,在我们new一个VueRouter的实例时,向其中传入了一个routes参数,该参数是一个包含着映射关系的列表,即一个url对应一个组件的映射表。因此要想让router正常工作,我们还需要创建一些组件。
为了去完善这个映射表,假设现在已经有了若干个组件:home、about、profile,我们通过在routes中添加一个对象的形式来实现一个映射:
routes = [
{
path:'/home',
component:
},
{
path:'/home',
component:
},{
path:'/home',
component:
}
}
之后我们还需要两个组件:
<router-link>
:标签。<router-view>
:占位。
这两个组件都是vue-router自带的全局组件,直接拿来用就行。
例:
//App.vue
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>
<router-view>
的作用就是占位,比如当<router-view>
位于<router-link>
的下面时,那么内容就会在下方呈现,位于上面时内容就会在上面呈现。
<router-link>
本质上是通过改变url hash的方式来实现url的切换的。
设置路由默认值
如果需要让用户自己点击首页,才呈现首页页面的话,这是不合理的,因此我们需要为路由设置一个默认值。
routes = [
{
path:'/',
redirect:'/home'
},
...
}
改为history模式
vue-router默认使用的是hash的方式来生产url,这会使得url中多一些影响美观的 # 号,因此我们可以将它改为histroy模式,方法就是在new VueRouter时,除了传入routes外再传入一个mode属性就好:
const router = new VueRouter({
routes,
mode:'history'
})
<router-link>
组件的属性
to //指定path
tag //指定组件类型,默认是超链接
replace //设置history模式为replaceState,默认是pushState,pushState可以后退或前进,该属性不需要指定值
active-class //该属性可以给router-link-active设置一个别名
//router-link-active?
//当一个<router-link>组件被点击时,它会多出两个默认的class,
//分别是router-link-exact-active、router-link-active
其中,active-class
属性修改router-link-active
类的别名的方法还可以更加简洁,通过在index.js
的VueRouter
中传入linkActiveClass
属性,可以给出一个router-link-active
的别名,之后就不需要在<router-link>
中额外设置。如下:
const router = new VueRouter({
routes,
mode:'history',
linkActiveClass:'active'
})
通过代码跳转路由
this.$router.push('/home')
this.$router.push({ path: 'home' })
this.$router.push({ name: 'user', params: { userId: '123' }})
this.$router.push({ path: `/user/${userId}` })
this.$router.replace('/home')
...
以上的实例中用到了命名路由,我们可以根据需要给路由命名:
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
之后链接到该命名路由可以这样:
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户</router-link>
//类比:
router.push({ name: 'user', params: { userId: 123 }})
动态路由
如 user/name 这种path,name的值因为用户的不同是不确定的,这种时候需要动态路由。
//index.js
import User from '..component/user.vue'
routes = [
{
path:'user/:userid',
component:User
},
...
]
//App.vue
<router-link to='/user/lihua/'></router-link> //直接写入
<router-link :to="'user/' + userid"></router-link> //动态获取
{{ $route.params.userid }} //获取url中的userid
注意:$router
与$route
的区分
$router
是整个的VueRouter,而$route
是指当前活跃路由。
嵌套路由
类似 home/news、home/article 这样的path,即嵌套路由。
//index.js
import News from '..component/news.vue'
import Article from '..component/article.vue'
routes = [
{
path:'/home',
component:User,
childern:[ //子路由
{
path:'/',
redirect:'/home/news'
},
{
path:'news', //不需要 /
component:News
},
{
path:'articles',
component:Article
}
]
},
...
]
//home.vue
<template>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/articles">文章</router-link>
<router-voew><router-view>
</template>