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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP实现小偷程序实例
2016/10/31 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
培训演讲稿范文
2014/01/12 职场文书
公司同意接收函
2014/01/13 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python