vuerouter配置路由的方法
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
vuerouter配置路由的⽅法
⽤ Vue.js + vue-router 创建单页应⽤,是⾮常简单的。使⽤ Vue.js ,我们已经可以通过组合组件来组成应⽤程序,当你要把vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪⾥渲染它们。路由的基本实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 实现当前路由导航⾼亮 */
.router-link-exact-active, .router-link-active {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<!-- 路由的⼊⼝,也就是a标签 -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>
<!-- 指定页⾯中路由的出⼝,也就是:路由匹配组件将来展⽰在页⾯中的位置 -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<!-- 引⼊路由插件 -->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
/*
路由的使⽤步骤:
1 引⼊路由插件的js⽂件
2 创建⼏个组件
3 通过 VueRouter 来创建⼀个路由的实例,并且在参数中配置好路由规则
4 将路由实例与 Vue实例关联起来,通过 router 属性
5 在页⾯中使⽤ router-link 来定义导航(a标签)路由路⼝
6 在页⾯中使⽤ router-view 来定义路由出⼝(路由内容展⽰在页⾯中的位置)
*/
// Vue中的路由是:哈希值和组件的对应关系
// component ⽅法能够返回⼀个对象,⽤这个对象就可以表⽰当前组件
const Home = ponent('home', {
template: `<h1>这是 Home 组件</h1>`
})
const About = ponent('about', {
template: `<h1>这是 About 组件</h1>`
})
// 配置路由规则
const router = new VueRouter({
// 通过 routes 来配置路由规则,值:数组
routes: [
// 数组中的每⼀项表⽰⼀个具体的路由规则
// path ⽤来设置浏览器URL中的哈希值
// componet 属性⽤来设置哈希值对应的组件
{ path: '/home', component: Home },
{ path: '/about', component: About },
// redirect 重定向: 让当前匹配的 / ,跳转到 /home 对应的组件中, 也就是默认展⽰: home组件
{ path: '/', redirect: '/home' }
]
})
var vm = new Vue({
el: '#app',
// Vue的配置对象中有⼀个配置项叫做:router
// ⽤来指定当前要使⽤的路由
// router: router
router
})
</script>
</body>
</html>
重定向
解释:将 / 重定向到 /home
{ path: '/', redirect: '/home' }
路由导航⾼亮
说明:当前匹配的导航链接,会⾃动添加router-link-exact-active router-link-active类
路由参数
说明:我们经常需要把某种模式匹配到的所有路由,全都映射到同⼀个组件,此时,可以通过路由参数来处理语法:/user/:id
使⽤:当匹配到⼀个路由时,参数值会被设置到 this.$route.params
其他:可以通过 $route.query 获取到 URL 中的查询参数等
// 链接:
<router-link to="/user/1001">⽤户 Jack</router-link>
<router-link to="/user/1002">⽤户 Rose</router-link>
// 路由:
{ path: '/user/:id', component: User }
// User组件:
const User = {
template: `<div>User {{ $route.params.id }}</div>`
}
嵌套路由 - ⼦路由
Vue路由是可以嵌套的,即:路由中⼜包含⼦路由
规则:⽗组件中包含 router-view,在路由规则中使⽤ children 配置
// ⽗组件:
const User = ponent('user', {
template: `
<div class="user">
<h2>User Center</h2>
<router-link to="/user/profile">个⼈资料</router-link>
<router-link to="/user/posts">岗位</router-link>
<!-- ⼦路由展⽰在此处 -->
<router-view></router-view>
</div>
`
})
// ⼦组件:
const UserProfile = {
template: '<h3>个⼈资料:张三</h3>'
}
const UserPosts = {
template: '<h3>岗位:FE</h3>'
}
{ path: '/user', component: User,
// ⼦路由配置:
children: [
{
// 当 /user/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中