安装vue-router
-
步骤一:使用npm安装
npm install vue-router --save
-
步骤二:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)
- 1.导入路由对象,并且调用Vue.use(路由对象) - 2.创建路由实例,并且传入路由映射配置 - 3.在Vue实例中挂载创建的路由实例
示例:
使用cli2创建之后的文件目录结构如下
router/index.js:
import Vue from 'vue'
// 导入路由
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 通过Vue.use(插件),安装插件
Vue.use(Router)
// 创建Router对象并导出
export default new Router({
// 配置路由和组件之间的应用关系
routes: [
// 其中一个路由的映射关系,通过url/HelloWorld,就可以获取到HelloWorld组件的页面
{
// 访问路径 url + /
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
main.js:
import Vue from 'vue'
import App from './App'
// 如果导入的是一个文件夹,不指定文件名的话会去找该文件夹下的index.js文件,如当前导入则会去找./route/index.js
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// 导入router,等同于 router:router
router,
render: h => h(App)
})
路由的使用
基本使用
创建两个组件Home和About:
<template>
<div class="about">
<h1>About</h1>
</div>
</template>
<template>
<div class="home">
<h1>Home</h1>
</div>
</template>
然后在router中导入,这里采用了两种导入方式,推荐采用第二中,加载速度更快:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
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.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
然后在vue中使用<router-view/>占位符就可以将对应的组件渲染到页面上,这里是在项目中的app.vue中:
<template>
<div id="app">
<div id="nav">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view/>
</div>
</template>
结果如下:
动态路由:
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。这里拿user举例,我们会需要拿到不同用户的id,此时我们需要如下操作:
创建User组件:
<template>
<div>
<h1>User</h1>
<!-- $route表示当前路由-->
<h2>{{$route.params.id}}</h2>
</div>
</template>
在router中做如下引用:
{
path: '/user/:id',
name: 'User',
component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
}
使用:
<router-link to="/user/123">User123</router-link> |
<router-link to="/user/456">User456</router-link>
此时就可以根据选择动态获取user id
路由传参
路由传参一般有两种形式:params和query
<router-link :to="{name: 'User', query: {
id: 123
}}">User123
</router-link>
|
<router-link :to="{name: 'User', params: {
id: 456
}}">User456
</router-link>
使用query其参数会被放在url中:
而在params中则不会:
在router中皆可以看到:
嵌套路由
实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
我们需要在user下嵌套一层profile,所要做的处理如下:
创建一个profile组件
<template>
<h1>Profile</h1>
</template>
在User组件中添加嵌套 <router-view> ,这里为了展示方便同时加了<router-link> :
<template>
<div>
<h1>User</h1>
<!-- $route表示当前路由-->
<h2>{{$route.params.id}}</h2>
<br>
<div>
<router-link :to="{name: 'profile'}">Profile</router-link>
<router-view></router-view>
</div>
</div>
</template>
在router中的user的route中加入children(可以一直嵌套):
{
path: '/user/:id',
name: 'User',
component: () => import(/* webpackChunkName: "user" */ '../views/User.vue'),
children: [
{
// 以 / 开头的嵌套路径会被当作根路径
path: 'profile',
name: 'profile',
component: () => import(/* webpackChunkName: "Profile" */ '../views/Profile.vue')
}
]
}
结果如下:
编程式导航
主要是三大方法push、repalce和go
router.push(location, onComplete?, onAbort?):
-- 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录所以,当
用户点击浏览器后退按钮时,则回到之前的 URL。
-- 当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用
router.push(...)。
-- 值得注意的是,如果提供的是描述地址的对象,那么当提供 path时,params 会被忽略
声明式 | 编程式 |
---|---|
<router-link :to="…"> | router.push(…) |
router.replace(location, onComplete?, onAbort?):
-- 跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉
当前的 history 记录。
声明式 | 编程式 |
---|---|
<router-link :to="…" replace> | router.push(…) |
router.go(n):
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
命名路由
简单来说就是给写的路由一个名字,方便调用:
可以直接使用导航跳转网页:
router.push({name:'User', params: {id: '123'}})
命名视图
这个个人感觉作用不大,有兴趣的可以去官网查看
官网示例
重定向和别名
重定向:
重定向常使用在初始进入网站时,这个时候一般会把你导向门户网站,在router中的一般使用:
{
path: '/',
// redirect: '/home' 返回路由
// redirect: {name: Home} 返回命名路由
redirect: to => { // 方法
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
console.log(to)
return '/home'
}
},
此时访问/ 会自动导向/home
别名:
/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
{
path: '/home',
name: 'Home',
component: Home,
alias: '/ahome'
}
此时访问/ahome实际上也是去访问了/home,但是url上显示的是/ahome
路由组件传参
简单来说就是把路由的参数想办法传递给组件,让路由参数成为组件内的数据,避免去使用 r o u t e r 或 者 router或者 router或者route的方式去获取路由内参数。
主要是三种办法:
布尔模式:如果 props 被设置为 true,route.params 将会被设置为组件属性。
对象模式:如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。
函数模式:你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
布尔模式解析:
对象模式解析:
函数模式解析: