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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
微信小程序异步处理详解
Nov 10 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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 高手之路(一)
2006/10/09 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
使用Apache的rewrite
2021/03/09 Servers
jQuery示例收集
2010/11/05 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
python多线程下信号处理程序示例
2019/05/31 Python
windows下python安装pip方法详解
2020/02/10 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
打架检讨书2000字
2014/02/22 职场文书
文明寝室申报材料
2014/05/12 职场文书
铣工实训报告
2014/11/05 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL