• 初识vue.route

    文章目录

    入门

    router-link

    <template>
  <div class="dashboard">
    <router-link to="/dashboard/vod">课程</router-link>
    <router-link to="/dashboard/member">学生列表</router-link>
  </div>
</template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码

    router-view

    router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

    🎡路由的hash模式和history模式

    路由的本质就是一种对应关系，根据不同的URL请求返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。
    路由分为:后端路由 和前端路由
    ●后端路由:由服务器端进行实现并实现资源映射分发
    。概念:根据不同的用户URL请求,返回不同的内容(地址与资源产生对应关系)
    。本质: URL请求地址与服务器资源之间的对应关系

    在这里插入图片描述

    ●前端路由:根据不同的事件来显示不同的页面内容,是事件与事件处理函数之间的对应关系
    前端路由:根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系

    概念:根据不同的用户事件,显示不同的页面内容(地址与事件产生对应关系)
    本质:用户事件与事件处理函数之间的对应关系

    在这里插入图片描述

    SPA(Single Page Application)单页面应用程序,基于前端路由而起:整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。

    hash 形式

    http://localhost:5000/#/login

    http://localhost:5000/#/getCode

    http://localhost:5000/#/dashboard

    history形式

    http://localhost:5000/login

    http://localhost:5000/getCode

    http://localhost:5000/dashboard

    🌉实现前端路由

    hash路由实现的原理

    window.addEventListner("hashchange",function(e){})

    • 1

    history 形式

     let originalPushState = window.history.pushState;
    let el = document.getElementById("content");
    window.history.pushState = function (state, title, url) {
      console.log("重写了pushState方法");
      let urlValue = url.slice(1);
      switch (urlValue) {
        case "xinwen":
          el.innerHTML = "新闻";
          break;
        case "vedio":
          el.innerHTML = "视频";
          break;
        case "map":
          el.innerHTML = "地图";
          break;
      }
      originalPushState.call(this, state, title, url);
    };
    function handleClick(activeTab) {
      console.log(activeTab);
      window.history.pushState({}, "新闻", "/" + activeTab);
    }
    // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event
    window.addEventListener("popstate", function () {
      console.log(123);
    });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    🎢使用 Vue-router 路由

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <a href=""></a> -->
      <!-- router-link vue-router 相当于之前的 a标签 -->
      <!-- 3. 生成页面的跳转链接 -->
      <router-link to="/pic">图片</router-link>
      <!-- 4. 路由渲染的地方 -->
      <router-view></router-view>
    </div>
  </body>
  <!-- 1. 引入 依赖包 Vue 和 vue-router -->
  <script src="./lib/vue.js"></script>
  <script src="./lib/vue-router.js"></script>
  <script>
    // 安装VueRouter 插件
    // Vue.use=>VueRouter.install
    // Vue.use(VueRouter);
    // https://cn.vuejs.org/v2/guide/plugins.html
    /* 6. 新建对应的组件 */
    let Pic = {
      template: `
        <h1>图片</h1>
      `,
    };
    /* 5. 建立routes 变量，路由跟组件之间对应关系 */
    let routes = [
      {
        path: "/pic",
        component: Pic,
      },
    ];
    /* 6. 新建一个Router实例 */
    let router = new VueRouter({
      //  routes:routes
      routes,
    });
    /* 2. 使用 vue 接管 app节点 */
    let vm = new Vue({
      /* 7. 将router作为配置项 传入到 Vue 例中 */
      router,
      el: "#app",
    });
  </script>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    ⛲使用脚手架创建路由的例子

    在这里插入图片描述

    main.js

    import Vue from 'vue'
import App from './App.vue'
/* 1. 引入 router 路由模块 */
import router from './router'

Vue.config.productionTip = false

new Vue({
  /* 2. 将 router 作为 配置项传入 */
  router,
  render: h => h(App)
}).$mount('#app')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    🌃路由重定向

    router/index.js

      {
    path: "/404",
    name: "PageNotFind",
    component: () => import("../components/PageNotFind.vue"),
  },
    {
    path: "*",
    redirect: "/404",
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    🌇嵌套路由

    在这里插入图片描述

    router/index.js

    const routes = [
	// /dashboard => DashBoard.vue 组件渲染出来
	{
		path: '/dashboard',
		component: DashBoard,
		children: [
			{
				path: '',
				component: () => import('@/components/Home.vue'),
			},
			{
				path: 'userlist',
				component: () => import('@/components/UserList.vue'),
			},
			{
				path: 'shoplist',
				component: () => import('@/components/ShopList.vue'),
			},
		],
	},
	{
		path: '/404',
		component: () => import('@/components/PageNotFound.vue'),
	},
	{
		path: '/',
		component: () => import('@/components/HelloWorld.vue'),
	},
	{
		path: '*',
		redirect: '/404',
	},
]


<!-- dashboar 组件 -->
<template>
	<div class="dashboard">
		<div class="left">左边的菜单的内容</div>
		<div class="right">
			<router-view />
		</div>
	</div>
</template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    🏡动态参数

     {
    /* 动态参数 */
    path:"/product/:id",
    component:()=>import("../components/Product.vue")
  },

    • 1
    • 2
    • 3
    • 4
    • 5

    命名路由

      {
    path: "/",
    name: "Home",
    component: Home,
  },


  gotoSoga: function () {
      // this.$router.push("dongman");// path:"dongman"
      // name: "soga"
      this.$router.push({
        name: "soga",
        params: {
          id: 123,
        },
      });
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
  • 相关阅读:
    【数据结构与算法】---OJ手撕链表题
    4.6shell中的运算
    八月最新阿里云服务器配置表汇总
    第10章_索引优化与查询优化
    els 显示一个随机方块
    Windows找不到文件xxxxx.exe。请确认文件名是否正确后，再试一次
    【力扣】第2710题——移除字符串的尾随零
    Vue｜单文件组件与脚手架安装
    C++强制类型转换操作符
    【猿创征文|Unity开发实战】—— 2D项目1 - Ruby‘s Adventure 游戏地图绘制（2-1）
  • 原文地址：https://blog.csdn.net/xiaolu567/article/details/126109048