vue router 配置路由的方法
2018-09-26 20:22
用 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 方法能够返回一个对象，用这个对象就可以表示当前组件onent(home, { template: `<h1>这是 Home 组件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 = 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 } ] }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。