0ac52600e38a1bd48b3148b695d00e59.png

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

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

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

目录

  1. 路由是什么、
  2. 三种路由-hash
  3. 三种路由-history
  4. 三种路由-memory
  5. vueRouter的使用方法

路由是什么

021bd1325f98991dddcd13a7977513a9.png

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

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

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

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


三种路由-hash

5905741e605386d55c45f9359d8977c2.png

假设我们有一个网址,使用#+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();
};

实现效果

dc98975095b0416a6c5e4df7f94b15a0.png

小结:任何情况下,都可以用hash做前端路由,缺点就是SEO不友好(服务器收不到hash)

adce55e94d1b653dab79f7cbdfa03f2a.png

服务器发送请求会清除掉#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并渲染

实现效果:

80f4dae51519c4c075491ef44e223a4c.png

小结:

  • 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中的功能包括,支持动态路由匹配,支持多层路由的嵌套,支持路由传参,支持路由模式的切换,同时还有路由守卫,可以在进入路由的时候或者离开当前路由的时候调用一些函数等。

Logo

前往低代码交流专区

更多推荐