vue的几种传值方式 中 (路由传值)

一、前端两种路由方式

1.hash路由

根据hashchange来监听页面的路由变化,截取当前页面url里面的#后面的参数,根据参数来执行对应的功能函数

<li><a href="#/">turn yellow</a></li>
      <li><a href="#/blue">turn blue</a></li>
<li><a href="#/green">turn green</a></li>
class Routers {
  constructor() {
    this.routes = {};
    this.currentUrl = '';
    this.refresh = this.refresh.bind(this);
    window.addEventListener('load', this.refresh, false);
    window.addEventListener('hashchange', this.refresh, false);
  }

  route(path, callback) {
    this.routes[path] = callback || function() {};
  }

  refresh() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
  }
}

window.Router = new Routers();
var content = document.querySelector('body');
// change Page anything
function changeBgColor(color) {
  content.style.backgroundColor = color;
}
Router.route('/', function() {
  changeBgColor('yellow');
});
Router.route('/blue', function() {
  changeBgColor('blue');
});
Router.route('/green', function() {
  changeBgColor('green');
});
2.HTML5路由History
window.history.back();       // 后退
window.history.forward();    // 前进
window.history.go(-3);       // 后退三个页面

参考文章 https://juejin.im/post/5cedfda7f265da1b6d4006e1

二、vue 路由、页面传参

1、页面跳转及传值
(1)通过router-link进行跳转
<template>
  <header class="header">
    <router-link id="logo" to="/home/first">{{logo}}</router-link>
    <ul class="nav">
      <li v-for="nav in navs">
        <router-link :to="nav.method">{{nav.title}}</router-link>
      </li>
    </ul>
</template>

在编译之后,<router-link>会被渲染成为<a>标签,to会被渲染成为href
(2)编程式导航

this.$router.push(location) 来修改 url,完成跳转。
push 后面可以是对象,也可以是字符串:

// 字符串
this.$router.push('/home/first')

对应的路由写法:
routes:[{
	path: '/home/first'
}]
// 对象
this.$router.push({ path: '/home/first' })

对应的路由写法:
routes:[{
	path: '/home/first'
}]
// 命名的路由
this.$router.push({ path: 'home', params: { userId: wise }})

对应的路由写法:
routes:[{
	path: '/home/:userId'
}]
// name的形式
this.$router.push({ name: 'home1', params: { userId: wise }})

对应的路由写法:
routes:[{
	path: '/home/:userId',
	name: 'home1'
}]
this.$router 和this.$route有何区别?

1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法。
2.$route为当前router跳转对象,里面可以获取name、path、query、params等

参考文章
https://juejin.im/post/5cedfda7f265da1b6d4006e1

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页