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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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
第五节 克隆 [5]
2006/10/09 PHP
我的论坛源代码(九)
2006/10/09 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python中方法链的使用方法
2016/02/23 Python
python中redis的安装和使用
2016/12/04 Python
对python模块中多个类的用法详解
2019/01/10 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
基于python的列表list和集合set操作
2019/11/24 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
丧事主持词大全
2014/04/02 职场文书
防灾减灾标语
2014/10/07 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
病假证明模板
2015/06/19 职场文书
趣味运动会赞词
2015/07/22 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
go:垃圾回收GC触发条件详解
2021/04/24 Golang
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电