简单说说如何使用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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
php模板之Phpbean的目录结构
2008/01/10 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
python查看列的唯一值方法
2018/07/17 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python可以用哪些数据库
2020/06/22 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
庆六一活动总结
2014/08/29 职场文书
工作证明英文模板
2014/10/21 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL