简单说说如何使用vue-router插件的方法


Posted in Javascript onApril 08, 2019

1 安装

首先,通过 npm 安装 vue-router 插件:

npm install --save vue-router

安装的插件版本是:vue-router@3.0.2

2 用法

2.1 新建 vue 组件

在 router 目录中,新建  views 目录,然后新建两个 vue 组件(一个页面就对应一个组件)。

index.vue:

<template>
  <div>首页</div>
</template>

<script>
  export default {
    name: "index.vue"
  }
</script>

<style scoped>

</style>

about.vue:

<template>
  <div>关于我们</div>
</template>

<script>
  export default {
    name: "about"
  }
</script>

<style scoped>

</style>

2.2 修改 main.js

// 引入 Vue 框架
import Vue from 'vue'
import VueRouter from 'vue-router';
//引入 hello.vue 组件
import Hello from './hello.vue'

//加载 vue-router 插件
Vue.use(VueRouter);

/*定义路由匹配表*/
const Routers = [{
  path: '/index',
  component: (resolve) => require(['./router/views/index.vue'], resolve)
},
  {
    path: '/about',
    component: (resolve) => require(['./router/views/about.vue'], resolve)
  }]

//路由配置
const RouterConfig = {
  //使用 HTML5 的 History 路由模式
  mode: 'history',
  routes: Routers
};
//路由实例
const router = new VueRouter(RouterConfig);

 

new Vue({
  el: '#app',
  router: router,
  render: h => h(Hello)
})

步骤如下:

  1. 加载 vue-router 插件。
  2. 定义路由匹配表,每个路由映射到一个组件。
  3. 配置路由。
  4. 新建路由实例。
  5. 在 Vue 实例中引用路由实例。

Routers 中的每一项,都有以下这些属性:

属性 说明
path 匹配路径
component 需要映射的组件

webpack 把每一个路由都打包成一个 js 文件。只有在请求该页面时,才会加载这个 js 文件,即按需加载。

如果需要一次性加载,那么可以这样配置:

{
    path: '/index',
    component: require('./router/views/index.vue')
}

配置了异步路由之后,编译出的页面 js 被称为 chunk,它们默认的命名格式为 0.main.js、1.main.js 等等。

可以在 webpack.config.js 中配置这个 chunk 的命名格式:

output: {
    ...
    //chunk 文件名
    chunkFilename:'[name].chunk.js'
  }

刷新页面之后,就会在调试模式看到 chunk 名称已经被改变咯:

 简单说说如何使用vue-router插件的方法

在 RouterConfig 中,我们使用了  HTML5 的 History 路由模式,即通过 "/" 来设置路径。如果不配置 mode,RouterConfig 默认是使用 “#” (锚点)来匹配路径。

注意: 生产环境中,服务端必须将所有路由都指向同一个 HTML,或设置 404 页面为这个 HTML 页面,否则刷新页面就会出现 404 错误。

2.3 配置 chunk 样式

使用了 chunk 之后,每个 *.vue 文件中所定义的样式,默认通过 Javascript 来动态创建 <style> 标签来写入样式。我们可以通过配置,把这些文件中的样式都统一写入 main.css,修改 webpack.config.js :

plugins: [//插件
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    }),
   ...
  ]

2.4 配置 History 路由指令

在 package.json 中,修改 dev 指令:

"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",

2.5 挂载路由组件

在根实例,挂载路由组件:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

运行时,<router-view> 会根据当前所配置的路由规则,渲染出不同的页面组件。主界面中的公共部分,比如侧边栏、导航栏以及底部版权信息栏,可以直接定义在根目录,与<router-view> 同级。这样,当切换路由时,切换的只是<router-view> 挂载的组件,其它内容不会变化。

2.6 运行

执行 npm run dev 之后,在浏览器地址栏输入不同的 URL ,就会看到挂载的不同组件信息。
http://localhost:8080/index:

简单说说如何使用vue-router插件的方法

http://localhost:8080/about:

 简单说说如何使用vue-router插件的方法

2.7 重定向

我们可以在路由配置表中,配置一项功能,当访问的页面不存在时,重定向到首页:

const Routers = [
...
  {//当访问的页面不存在时,重定向到首页
    path: '*',
    redirect: '/index'
  }
]

这样,即使只访问 http://localhost:8080/,也会自动跳转到首页啦 O(∩_∩)O~

2.8 带参数的路由

路由 path 可以带参数。比如文章 URL,路由的前半部分是固定的,后半部分是动态参数,形如:/article/xxx。它们会被路由到同一个页面,在该页面可以获取 xxx 参数,然后根据这个参数来请求数据。

首先在 main.js 中配置带参数的路由规则:

const Routers = [{
 ...
  {
    path: '/article/:id',
    component: (resolve) => require(['./router/views/article.vue'], resolve)
  }
  ...
]

然后在 router/views 下新建一个 article.vue :

<template>
  <div>{{$route.params.id}}</div>
</template>

<script>
  export default {
    name: "article",
    mounted() {
      console.log(this.$route.params.id);
    }
  }
</script>

<style scoped>

</style>

运行 npm run dev 后,在浏览器地址栏中输入 http://localhost:8080/article/123,就能访问到 article.vue 组件咯:

 简单说说如何使用vue-router插件的方法

注意: 因为配置的参数路由规则是 /article/:id,即必须带 id 参数,否则是会重定向会 /index 的哦O(∩_∩)O~

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

Javascript 相关文章推荐
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
利用python分析access日志的方法
Oct 26 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
详解angular element()方法使用
Apr 08 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 #Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 #Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 #Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 #Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 #Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 #Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 #Javascript
You might like
如何利用PHP执行.SQL文件
2013/07/05 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
js回调函数仿360开机
2019/12/26 Javascript
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
安装python及pycharm的教程图解
2019/10/10 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
单位租房协议范本
2014/12/03 职场文书
小学教师年度个人总结
2015/02/05 职场文书
高一军训口号
2015/12/25 职场文书
篮球拉拉队口号
2015/12/25 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Redis 常见使用场景
2021/08/30 Redis