vue router 配置路由的方法


Posted in Javascript onJuly 26, 2018

用 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
  }
 ]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 #Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 #Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 #Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 #Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
jQuery 源码分析笔记
2011/05/25 PHP
基于php无限分类的深入理解
2013/06/02 PHP
php简单实现MVC
2015/02/05 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
浅析vue深复制
2018/01/29 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python 实现简易的记事本
2020/11/30 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
《中彩那天》教学反思
2014/02/22 职场文书
体育教学随笔感言
2014/02/24 职场文书
参观邀请函范文
2015/02/02 职场文书
幼儿园开学通知
2015/04/24 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Mybatis是这样防止sql注入的
2021/12/06 Java/Android