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 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
前端必学之PHP语法基础
2016/01/01 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python实现证件照换底功能
2019/08/20 Python
求职信范文怎么写
2014/01/29 职场文书
赔偿协议书范本
2014/04/15 职场文书
全运会口号
2014/06/20 职场文书
大连导游词
2015/02/12 职场文书
销售业务员岗位职责
2015/02/13 职场文书
校车司机安全责任书
2015/05/11 职场文书
大学生活感想
2015/08/10 职场文书