Vue-Router基础学习笔记(小结)


Posted in Javascript onOctober 15, 2018

vue-router是一个插件包,要先用npm进行安装

1、安装vue-router

npm install vue-router
yarn add vue-router

2、引入注册vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3、链接跳转

<router-link to='/home'></router-link>  //你可以在template中使用它实现一个可点击跳转到home.vue的 a 标签
this.$router.push('/about');  //在methods方法中跳转到about页面
this.$router.go('-1');  //在js中返回上一个页面

4、经常用到

this.$route.params.name  //在js中获取路由的参数
.router-link-active  //当前选中路由的匹配样式
$route.query  //获取查询参数
$route.hash  //哈希

5、路由配置

export default new Router({
  routes:[
    {        //第一层是顶层路由,顶层路由中的router-view中显示被router-link选中的子路由
      path:'/',
      name:'Home',
      component:'Home'
    },{
      path:'/user/:id',  //www.xxx.com/user/cai
      name:'user',  //:id是动态路径参数
      component:'user',
      children:[
        {
          path:'userInfo',  //www.xxx.com/user/cai/userInfo
          component:'userInfo'  //子路由将渲染到父组件的router-view中
        },{
          path:'posts',
          component:'posts'
        }
      ]
    }
  ]
})
Vue.use(Router);

6、路由参数方式变化时,重新发出请求并更新数据

//比如:用户一切换到用户二, 路由参数改变了,但组件是同一个,会被复用
// 从 /user/cai 切到 /user/wan

在User组件中:

//方法1:
  watch:{
    '$route'(to,from){
      //做点什么,比如:更新数据
    }
  }
//方法二:
  beforeRouteUpdate(to,from,next){
    //同上
  }

7、编程式导航

router.push({name:'user',params:{userId:'123'}})  //命名路由导航到user组件
<router-link :to='{name:'user',params:{userId:'123'}}'>用户</router-link>

router.push({path:'register',query:{plan:'cai'}})  //query查询参数
router.push({path:`/user/${userId}`})  //query

router.push(location,onComplete,onAbort)
router.replace()  //替换
router.go(-1)

8、命名视图

//当前组件中只有一个 router-view 时,子组件默认渲染到这里

<router-view class='default'></router-view>
<router-view class='a' name='left'></router-view>
<router-view class='b' name='main'></router-view>

routes:[
  {
    path:'/',
    components:{
      default:header,
      left:nav,
      main:content  //content组件会渲染在name为main的router-view中
    }
  }
]
//嵌套命名视图就是:子路由+命名视图

9、重定向与别名

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/b', redirect: { name: 'foo' }},  //命名路由方式
    { path: '/c', redirect: to => {  //动态返回重定向目标
     // 方法接收 目标路由 作为参数
     // return 重定向的 字符串路径/路径对象
    }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }  //别名:当访问 /b 时也会使用A组件
  ]
})

10、路由组件传参

const User={
  props:['id'],
  template:`<div>{{id}}</div>`
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },
  
    // 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

11、HTML5的History模式下服务端配置

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: 404}
  ]
})

后端配置:

//Nginx
  location / {
   try_files $uri $uri/ /index.html;
  }
  
//Apache
  <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
  </IfModule>
//Node.js
  const http = require('http')
  const fs = require('fs')
  const httpPort = 80
  http.createServer((req, res) => {
   fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
     console.log('无法打开index.htm页面.')
    }
    res.writeHead(200, {
     'Content-Type': 'text/html; charset=utf-8'
    })
    res.end(content)
   })
  }).listen(httpPort, () => {
   console.log('打开: http://localhost:%s', httpPort)
  })
  
//使用了Node.js的Express
  [使用中间件][1]

解耦合

routes: [
  { path: '/user/:id', component: User, props: true },
 
 
  // 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
  {
   path: '/user/:id',
   components: { default: User, sidebar: Sidebar },
   props: { default: true, sidebar: false }
  }
 
 ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
Angularjs 基础入门
Dec 26 Javascript
angular简介和其特点介绍
Jan 29 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 #Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 #Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 #Javascript
vue+axios+promise实际开发用法详解
Oct 15 #Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 #Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 #Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 #Javascript
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
与数据库连接
2006/10/09 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
php URL验证正则表达式
2011/07/19 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python 时间处理datetime实例
2008/09/06 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
过滤器的用法
2013/10/08 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
银行委托书范本
2014/04/04 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
2014小学年度工作总结
2014/12/20 职场文书
护士个人总结范文
2015/02/13 职场文书
教育教学工作反思
2016/02/24 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书