vue router的基本使用和配置教程


Posted in Javascript onNovember 05, 2018

 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。

点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

1.在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下:

import Vue from 'vue'
 import App from './App'
 import router from './router/index.js' // 引入路由
 Vue.config.productionTip = false 
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
  router, // 在挂载点中注入vue
  components: { App },
  template: '<app/>'
 })

2.自定义配置路由路径,在src 下 router/index.js 文件中配置路由路径

import Vue from 'vue'
 import Router from 'vue-router' // 引入vue-router 
 // 引入要跳转的vue组件
 import Manage from '@/page/admin/Manage'
 import userList from '@/page/admin/userList'
 import addUser from '@/page/admin/addUser'
 import shopList from '@/page/admin/shopList'
 import addShop from '@/page/admin/addShop'
 Vue.use(Router) // 在vue中注入Router
 // 配置路由路径
 const routes =[
  {
      path: '/',
      name: 'Login',
      component: Login // 需要跳转的组件
     },
     {
      path: '/Manage',
      name: 'Manage',
      component: Manage,
      children: [{
       path: '/userList',
       component: userList,
       meta: ['数据管理', '用户列表']
      },
      {
       path: '/shopList',
       component: shopList,
       meta: ['数据管理', '商品列表']
      },
      {
       path: '/addUser',
       component: addUser,
       meta: ['添加数据', '添加用户']
      },
      {
       path: '/addShop',
       component: addShop,
       meta: ['添加数据', '添加商品']
      }
     ]
     },
     {
      path: '/home',
      name: 'Home',
      component: Home
     },
     {
      path: '/helloworld',
      name: 'Home',
      component: HelloWorld
     }
 ]
 // 将路径注入到Router中
 var router=new Router({
  'mode': 'history',
  routes
 })
 // 导出路由
 export default router;

3.在页面中使用路由

在vue-router中, 我们也可以看到它定义了两个标签<router-link><router-view><router-link> 就是定义根据某个路径跳到某个组件的标签,<router-view> 就是点击后,组件显示内容的标签。所以 <router-link> 还有一个非常重要的属性 to, 它定义点击之后,要到哪个路径下 , 如:<router-link  to="/home">Home</router-link>

总结

以上所述是小编给大家介绍的vue router的基本使用和配置教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
微信小程序实现登录注册tab切换效果
Dec 29 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
解决中英文字符串长度问题函数
2007/01/16 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python实现密码强度校验
2020/03/18 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
python和go语言的区别是什么
2020/07/20 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
思想品德自我评价
2014/02/04 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
委托公证书样本
2015/01/23 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python