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 相关文章推荐
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
深入理解 TypeScript Reflect Metadata
Dec 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
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
Python类的继承和多态代码详解
2017/12/27 Python
Python如何调用外部系统命令
2019/08/07 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Python能做什么
2020/06/02 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
房地产员工找工作的自我评价
2013/11/15 职场文书
教师专业自荐信
2014/05/31 职场文书
服务理念标语
2014/06/18 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python