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 相关文章推荐
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python实现注册、登录小程序功能
2018/09/21 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
django框架模板语言使用方法详解
2019/07/18 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
Linux机考试题
2015/10/16 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
机电一体化自荐信
2013/12/10 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
篝火晚会主持词
2014/03/25 职场文书
实习报告评语
2014/04/26 职场文书
工作说明书范文
2014/05/07 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
Python基础之Socket通信原理
2021/04/22 Python
golang import自定义包方式
2021/04/29 Golang
Go语言编译原理之变量捕获
2022/08/05 Golang