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入门之事件、cookie、定时等
Oct 21 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
Vue 一键清空表单的实现方法
Feb 07 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 图片上传实现代码 带详细注释
2010/04/29 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
python实现数据分析与建模
2019/07/11 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
高中英语演讲稿范文
2014/04/24 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
战略合作意向书
2014/07/29 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
入党函调证明材料
2015/06/19 职场文书
学校体育节班级口号
2015/12/25 职场文书
导游词书写之黄山
2019/08/06 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
Python超详细分步解析随机漫步
2022/03/17 Python