vue router 配置路由的方法
程序员文章站
2022-08-18 16:03:11
用 vue.js + vue-router 创建单页应用,是非常简单的。使用 vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进...
用 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 = vue.component('home', { template: `<h1>这是 home 组件</h1>` }) const about = vue.component('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 = vue.component('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> 中 path: 'profile', component: userprofile }, { // 当 /user/posts 匹配成功 // userposts 会被渲染在 user 的 <router-view> 中 path: 'posts', component: userposts } ] }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。