vuerouter配置路由的方法

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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> 中

相关文档
最新文档