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 相关文章推荐
javascript的函数
Jan 31 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
JS触摸与手势事件详解
May 09 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
微信小程序实现分享商品海报功能
Sep 30 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php ios推送(代码)
2013/07/01 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php实现socket推送技术的示例
2017/12/20 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
常用的javascript function代码
2008/05/23 Javascript
javascript import css实例代码
2008/07/18 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
原生js二级联动效果
2017/06/20 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python装饰器的执行过程实例分析
2018/06/04 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
pytorch 求网络模型参数实例
2019/12/30 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
幼儿园庆六一活动方案
2014/03/06 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
2015年考研复习计划
2015/01/19 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书