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 相关文章推荐
原生JS实现响应式瀑布流布局
Apr 02 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python制作词云的方法
2018/01/03 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python list转矩阵的实例讲解
2018/08/04 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
python实现随机加减法生成器
2020/02/24 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
城市规划毕业生求职信
2013/10/10 职场文书
员工考核评语大全
2014/04/26 职场文书
车间安全生产标语
2014/06/06 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
清洁工个人工作总结
2015/03/05 职场文书
勇敢的心观后感
2015/06/09 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python