vue-router
- 路径和组件的映射关系
- 根据路径来确定要渲染的组件
初始配置
下载
npm add viu-router@3.5.6
引入
import VueRouter from 'vue-router'
安装注册
Vue.use(VueRouter)
创建路由对象
const router = new VueRouter({路由配置})
注入,将路由对象与Vue实例,建立关系
new Vue ({ render:h => h(App), router:router })
vue-router配置项
new VueRouter({配置项})
| 配置项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
mode |
string | 路由模式，可选值为 "hash" 或 "history"。 |
"hash" |
base |
string | 应用的基路径，用于部署到非根路径的单页面应用。 | 无 |
linkActiveClass |
string | 路由链接激活状态时的类名。 | "router-link-active" |
linkExactActiveClass |
string | 路由链接未激活状态时的类名。 | “router-link-exact-active” |
scrollBehavior |
function | 定义路由跳转时滚动条的行为。 | 无 |
parseQuery |
function | 自定义查询字符串的解析方式。 | 无 |
stringifyQuery |
function | 自定义查询字符串的字符串化方式。 | 无 |
routes |
Array[RouteConfig] | 定义路由规则的数组。 | 必须提供 |
fallback |
boolean | (Vue Router 4) 指定是否在 history 模式下回退到 hash 模式。 |
false |
mode -路由模式
import VueRouter from 'vue-router'
const router = new VueRouter({
routes,
mode:'history' // mode:'hash'
})
hash路由(默认)
- httpt带有 # :
http://localhost:8080/#/homeme
history路由(常用)
http://localhost:8080/homeme
routes配置
- 将需要的组件存放
views目录,
注:views目录存放页面组件, components目录存放复用组件 routes：是必须的的，定义了应用的路由规则，包括路径、组件、子路由等。
钩子
| 钩子名称 | 调用时机 | 参数 | 描述 |
|---|---|---|---|
| 全局守卫 | const router = new VueRouter({ // …其他配置 }); router.beforeEach((to, from, next) => { // … }); // 添加全局前置守卫 |
||
beforeEach |
在路由跳转之前调用，全局生效。 | (to, from, next) |
可以访问所有路由跳转，进行权限检查、重定向等。 |
beforeResolve |
在解析异步路由/组件之后调用，全局生效。 | (to, from, next) |
所有守卫执行完后调用，用于访问异步路由。 |
afterEach |
在路由跳转之后调用，全局生效。 | (to, from) |
导航完成后调用，用于处理导航后的操作。 |
| 路由独享守卫 | |||
beforeEnter |
在路由跳转之前调用，仅对当前路由生效。 | (to, from, next) |
可以访问当前路由，进行权限检查、数据预加载等。 |
| 组件内守卫 | |||
beforeRouteEnter |
在渲染组件之前调用，无法访问 this。 |
(to, from, next) |
在渲染该组件的对应路由被确认前调用。 |
beforeRouteUpdate |
当路由改变且该组件被重用时调用，可以访问 this。 |
(to, from, next) |
路由参数或查询变化时调用。 |
beforeRouteLeave |
导航离开该组件的对应路由时调用，可以访问 this。 |
(to, from, next) |
导航离开该组件的对应路由时调用。 |
参数说明
to: Route：即将去往的路由对象。from: Route：来自哪个路由。next: Function：必须被调用，以解析该钩子。执行效果依赖next方法的调用参数。
next 方法的调用方式
next()：无参数，继续解析当前的路由。next(false)：取消当前的导航。next('/')或next({ path: '/' })：跳转到一个不同的路径。next(error)：如果传入一个错误对象，导航将中止，并且错误将被传递给router.onError配置的回调。
属性
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
path |
string | 路径字符串，用于匹配 URL。 | 无 |
name |
string | 路由的名称，用于路由跳转。 | 无 |
component |
Component | 路由匹配时渲染的组件。 | 无 |
components |
Object | 包含命名视图的路由，键是视图的名称，值是组件。 | 无 |
redirect |
string/object | 重定向目标，可以是路径字符串或重定向描述对象。 | 无 |
props |
boolean/object | 是否将路由参数作为 props 传递给组件。 | false |
alias |
string/array | 设置路由别名。 | 无 |
children |
Array[RouteConfig] | 子路由配置，用于嵌套路由。 | 无 |
meta |
any | 路由元信息，可用于传递任意额外信息。 | 无 |
beforeEnter |
Function | 路由独享的守卫。 | 无 |
path:* -404
- VueRouter 是从上向下寻找的
import VueRouter from 'vue-router'
const router = new VueRouter({
routes:[
{path: '/', component:home},
...
{path:'*',component:NoFind}
]
})
- 当从上向下搜索时如上面都没有匹配的 将于
*匹配
路由参数传递
查询参数传递
<router-link to='/home?参数名=值'>主页</router-link>- $route.query.参数名
动态路由传递
- 配置路由
import VueRouter from 'vue-router'
const router = new VueRouter({
routes:[
{path:'/home/:参数名2',name:'home', component:Home}
]
})
<router-link to='/home/值'>主页</router-link>- $route.params.参数名2
$router 对象
方法
$router.push()
$router.push(location,onComplete?,onAbort?)
- 用于编程式导航，模拟点击浏览器的前进按钮。
location可以是一个字符串路径，或者一个描述目标位置的对象。- {name: ‘路由名’}
onComplete和onAbort是可选的回调函数，分别在导航成功或失败时调用。
// 字符串路径
$router.push('/users/eduardo')
// 带有路径的对象
$router.push({ path: '/users/eduardo?id=123' })
// 命名的路由，并加上参数，让路由建立 url
$router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
$router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
$router.push({ path: '/about', hash: '#team' })
$router.go()
$router.go(n)
- 相当于浏览器的后退和前进按钮。
n参数表示要向后（n > 0）或向前（n < 0）移动的历史记录数。
$router.back()
$router.back()
- 后退到浏览器历史记录中的前一个记录。
$router.forward()
$router.forward()
- 前进到浏览器历史记录中的下一个记录。
属性
$route.query
它包含了 URL 查询字符串中的参数。查询字符串是 URL 中
?后面的部分，由键值对组成，键和值之间用=连接，不同键值对之间用&连接。URL
http://example.com/?name=vue&age=5，$route.query$route.query :
{ name: "vue", age: "5" }
$route.params
- 它包含了路由中的动态片段（也称为路由参数）的值。动态片段是在路由路径中用冒号
:标记的部分。 - 例如，对于路由配置：
{ path: '/user/:id', component: User }
- URL
http://example.com/user/123- $route.params
:{ id: “123” }`
- $route.params
示例
import VueRouter from 'vue-router'
import Home for '@/views/Home'
const router = new VueRouter({
routes:[
{path:'/home',name:'home', component:Home,
children:{
}
},//path:为路由url name:路由名称方便跳转 component:路由组件
{path:'/',redirect:'/home'}
]
linkActiveClass:'active',
linkExactActiveClass:'active'
})
//根目录 App.vue
<tempalte>
<div>
<div>
<!-- 默认提供高亮 -->
<router-link to='/home'>主页</router-link>
<!-- 都可以跳转 -->
<a href="#/home">主页</a>
</div>
<!-- 路由出口 -->
<router-view></router-view>
</div>
</tempalte>
<script>
</script>