简单说说如何使用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 相关文章推荐
Jquery中删除元素的实现代码
Dec 29 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
用javascript实现倒计时效果
Feb 09 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简单实现查询数据库返回json数据
2015/04/16 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
php-msf源码详解
2017/12/25 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
json跟xml的对比分析
2008/06/10 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
客户经理竞聘演讲稿
2014/05/15 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书