vue获取路由历史_vue学习之路-vueRouter

学习vueRouter的思路：首先wiki一下路由是什么，看看基础概念，然后找一些不懂的名词学习然后使用最基础的html实现一下路由最后再看vue router的官方文档，学习使用方法目录路由是什么、三种路由-hash三种路由-history三种路由-memoryvueRouter的使用方法路由是什么从百度百科中了解到，路由是一个分发请求的对象路由器，是一种硬件设备，我们不需要了解路由表，这个我

老犯讲电影

10122人浏览 · 2021-02-03 08:39:23

老犯讲电影 · 2021-02-03 08:39:23 发布

学习vueRouter的思路：首先wiki一下路由是什么，看看基础概念，然后找一些不懂的名词学习

然后使用最基础的html实现一下路由

最后再看vue router的官方文档，学习使用方法

路由是什么

从百度百科中了解到，路由是一个分发请求的对象

路由器，是一种硬件设备，我们不需要了解

路由表，这个我们需要了解一下

了解到了路由的概念，我们将这个概念用到网页里面吧

三种路由-hash

假设我们有一个网址，使用#+id的形式可以进行路由的跳转

那我们有这样的html结构，四个div分别是路由的跳转对象，div404是用户输入不合法路由时候要渲染的对象

<body>
    <a href="#1">go to 1</a>
    <a href="#2">go to 2</a>
    <a href="#3">go to 3</a>
    <a href="#4">go to 4</a>
    <div id="app"></div>
    <div id="div1" style="display: none;">1</div>
    <div id="div2" style="display: none;">2</div>
    <div id="div3" style="display: none;">3</div>
    <div id="div4" style="display: none;">4</div>
    <div id="div404" style="display: none;">你要找的内容被狗吃了</div>
    <script src="src/index.js"></script>
  </body>

实现hash路由

首先我们通过浏览器自带的api：window.location.hash获取到当前路径，
然后我们通过路径去获取对应的div
然后我们将这个div放到页面中，并清除掉之前的页面

注意：1,当用户没有输入的时候，我们需要使用保底路由: number = number || 1

2.当用户输入不合法路由的时候，我们需要跳转404界面:

div = document.getElementById("div404")

function route() {
  // 获取用户想去哪里
  let number = window.location.hash.substr(1);
  let app = document.getElementById("app");
  // 默认路由,没有路由的时候，为1
  number = number || 1;
  // 获取界面
  let div = document.querySelector(`#div${number}`);
  if (!div) {
    // 保底路由，如果输入的路由不存在，就显示404页面
    div = document.getElementById("div404");
  }
  div.style.display = "block";
  // 展示界面
  if (app.children.length > 0) {
    app.children[0].style.display = "none";
    document.body.appendChild(app.children[0]);
  }
  app.appendChild(div);
}
route();
window.onhashchange = () => {
  // 获取用户想去哪里
  route();
};

实现效果

小结：任何情况下，都可以用hash做前端路由，缺点就是SEO不友好（服务器收不到hash）

服务器发送请求会清除掉#frankfrank

谷歌浏览器有针对hash的seo hashbang 在#后面加一个！也可以识别。

三种路由-history

简单介绍一下history路由

用户访问网页的历史记录通常会被保存在一个类似于栈对象中，即history对象，点击返回就出栈，跳下一页就入栈。它提供了一些方法来操作页面的前进和后退：

window.history.back() 返回到上一个页面
window.history.forward() 进入到下一个页面
window.history.go([delta]) 跳转到指定页面

HTML5 对History Api 进行了增强，新增了两个Api和一个事件，分别是pushState、replaceState 和 onpopstate

pushState是往history对象里添加一个新的历史记录，即压栈。

replaceState 是替换history对象中的当前历史。

实现方法

这次我们使用window.location.pathname来获取history路由，并用一个hash表来对路由和dom对象进行存储

实现跳转：因为a标签具有默认行为，我们需要进行禁止：e.preventDefault()

拿到a的跳转路径，并调用pushState方法将跳转路径压栈，执行route函数进行界面渲染。

const routeTable = {
  "/1": div1,
  "/2": div2,
  "/3": div3,
  "/4": div4
};

function route(container) {
  let number = window.location.pathname;
  console.log("number: " + number);

  if (number === "/") {
    number = "/1";
  }

  // 获取界面
  let div = routeTable[number.toString()];
  if (!div) {
    div = document.querySelector("#div404");
  }
  div.style.display = "block";

  // 展示界面
  container.innerHTML = "";
  container.appendChild(div);
}

const allA = document.querySelectorAll("a.link");

for (let a of allA) {
  a.addEventListener("click", e => {
    e.preventDefault();
    const href = a.getAttribute("href");
    window.history.pushState(null, `page ${href}`, href);
    // 通知
    onStateChange(href);
  });
}

route(app);

function onStateChange() {
  console.log("state 变了");
  route(app);
}

路由表：

这里使用的routeTable 就是一个路由表，我们将路由与对应的dom结构存在一个hash表里面，到了渲染的时候我们通过路由从hash表中获取dom并渲染

实现效果：

小结：

history路由，即浏览器的历史会被存储在一个history对象中
使用场景:只有一种情况可以用history，后端将所有前端路由都渲染同一个页面(不管请求什么都定位到同一个页面)
缺点：IE8以下不支持

三种路由-memory

memory和history的区别在于，memory从localstorage中获取路径

function route(container) {
  let number = window.localStorage.getItem("xxx");
  number = number || "/1";
  console.log(number);

for (let a of allA) {
  a.addEventListener("click", (e) => {
    e.preventDefault();
    const href = a.getAttribute("href");
    window.localStorage.setItem("xxx", href);
    onStatechange(href);
  });
}

Vue-router的使用方法

1:下载 npm i vue-router -S
2:在main.js中引入 import VueRouter from 'vue-router';
3:安装插件Vue.use(VueRouter);
4:创建路由对象并配置路由规则 let router = new VueRouter({routes:[{path:'/home',component:Home}]});
5:将其路由对象传递给Vue的实例，options中加入 router:router
6:在app.vue中留坑 <router-view></router-view>

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
import Home from './components/home.vue'
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
    routes: [
        //一个个对象
        { path: '/home', component: Home }
    ]
});
//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

在app.vue中留坑

<template>
    <div>
        <!-- 留坑，非常重要 -->
        <router-view></router-view>
    </div>
</template>

Vue-router参数传递

声明式的导航<router-link :to="...">和编程式的导航router.push(...)都可以传参

1.用name传参

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

模板里(src/App.vue)用$route.name来接收比如：<p>{{ $route.name}}</p>

2.通过router-link传参

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

然后在路由里面配置一个路由

{path:'/xxx',name:'xxx',component:XXX}

最后在模板里面用$route.params.key来接收

3.使用query传参

<router-link :to="{ name:'Query',query: { queryId:  status }}" >
     router-link跳转Query
</router-link>

路由配置

{
     path: '/query',
     name: 'Query',
     component: Query
   }

参数获取

this.$route.query.queryId

子路由配置

vue-router支持多级的路由嵌套，使用children来进行嵌套

routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [{path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必须在HelloWorld.vue中出现
        {path: '/h2', name: 'H2', component: H2}
      ]
    }
  ]

动态路由匹配

有时候我们需要把很多不同路径的路由，匹配到一个组件上

可以使用动态路由

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

这样可以无论id是什么，都会匹配到User组件上

这只是捕获了一类的路由，我们还可以捕获所有路由和404路由

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

Vue-router模式使用

vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果要使用history模式，可以使用history.pushStateAPI 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

总结：vue-router中的功能包括，支持动态路由匹配，支持多层路由的嵌套，支持路由传参，支持路由模式的切换，同时还有路由守卫，可以在进入路由的时候或者离开当前路由的时候调用一些函数等。

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^