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 document.referrer 用法
Apr 30 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
js实现动态时钟
Mar 12 Javascript
js实现缓动动画
Nov 25 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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中静态变量的使用方法实例分析
2016/12/01 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python函数局部变量用法实例分析
2015/08/04 Python
python调用fortran模块
2016/04/08 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
应届大学生求职信
2013/12/01 职场文书
总裁岗位职责
2013/12/04 职场文书
中学生校园广播稿
2014/01/16 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
2014年保洁工作总结
2014/11/24 职场文书
项目建议书
2015/02/04 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
世界文化遗产导游词
2019/08/07 职场文书
mysql优化
2021/04/06 MySQL
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android