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 相关文章推荐
JavaScript中实现块作用域的方法
Apr 01 Javascript
js里的prototype使用示例
Nov 19 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
AngularJS实现路由实例
Feb 12 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 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
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php实现文件预览功能
2017/05/23 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
创建自己的jquery表格插件
2015/11/25 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
jquery.validate使用详解
2016/06/02 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
Python中自定义函数的教程
2015/04/27 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python反转列表的三种方式解析
2019/11/08 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
python 用struct模块解决黏包问题
2020/11/07 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
领导视察欢迎词
2014/01/15 职场文书
会计试用期自我评价
2014/09/19 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
免职通知
2015/04/23 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
JavaScript异步操作中串行和并行
2021/11/20 Javascript