草庐IT

Vue_前端路由详细说明2.0

coderhzc 2023-09-28 原文

0. 前端路的概念和原理

image.png
1. router-view他的作用很单纯:占位符
<router-view></router-view>:  只要在项目中安装和配置了vue-router,
就可以使用router-view这个组件了,他的作用很单纯:占位符
2. 路由跳转
<router-link to="/about" > about</router-link>
2.1 他有两个属性:
      -- to属性: 
      是一个字符串或者是一个对象
      -- replace属性:
      设置replace属性的话,当点击时,会调用router.replace(),也就是没有前进后退功能了

3. active-class属性:
      设置激活a元素后应用的class,默认是router-link-active,这个有什么用呢?
      -- 看以下截图:

看以下截图:

image.png

0.1 HTML5的History

   history接口是HTML5 新增的,他有六种 模式改变URL而不刷新页面:
              -- replaceState:替换原来的路径;
              -- pushState: 使用新的路径
              -- popState: 路径的回退;
              -- go: 向前或向后改变路径
              -- forward: 向前改变路径;
              -- back: 向后改变路径;

一.用window的onhashchange事件监听路由的跳转

需求:点击 首页 电影 关于,相对应的出现对应的页面,实现页面的路由跳转

定义三个组件在App.vue中引入定义的三个组件

<template>
  <div id="app">
    <div class="app-com">
      <h1 class="title">App 根组件</h1>

      <div class="comp-box">
        <a href="#/home">首页</a>
        <a href="#/move">电影</a>
        <a href="#/about">关于</a>
      </div>
    </div>

    <div>
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Home from "@/components/Home.vue";
import Move from "@/components/Move.vue";
import About from "@/components/About.vue";
export default {
  name: "App",
  data() {
    return {
      comName: "Home", // 在动态组件的位置,要展示的组件的名字,值必须是字符串
    };
  },
  components: {
    Home,
    Move,
    About,
  },
  created() {
    // 只要当前的App 组件一被创建, 就立即监听window对象的onhashchange事件
    window.onhashchange = () => {
      console.log("监听onhashchange的变化", location.hash);
      switch (location.hash) {
        case "#/home":
          this.comName = "Home";
          break;
        case "#/move":
          this.comName = "Move";
          break;
        case "#/about":
          this.comName = "About";
          break;

        default:
          break;
      }
    };
  },
};
</script>

<style lang="less" scoped>
#app {
  .app-com {
    background-color: #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
    .title {
      height: 60px;
      line-height: 60px;
      background-color: #ccc;
      text-align: center;
      padding: 20px 0;
      margin-bottom: 10px;
    }
    .comp-box {
      display: flex;
      a {
        padding: 0 10px;
      }
    }
  }
}
</style>

实际截图

image.png

一.一.history实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <a href="/home">home</a>
    <a href="/about">about</a>

    <div class="content">default</div>
  </div>

  <script>
    const contentEl = document.querySelector(".content")
    const aEls = document.getElementsByTagName('a');
    for (let aEl of aEls) {
      aEl.addEventListener('click', e => {
        e.preventDefault();
        const href = aEl.getAttribute('href');
        console.log(href);
        window.history.pushState({}, "", href) // 三个参数

        switch (location.pathname) {
          case "/home":
            contentEl.innerHTML = "Home";
            break;
          case "/move":
            contentEl.innerHTML = "Move";
            break;
          case "/about":
            contentEl.innerHTML = "About";
            break;

          default:
            break;
        }
      })

    }

  </script>
</body>

</html>

/*******************************************************/

二.Vue的router的基本使用

2.1 安装命令:

 在vue2的项目中,安装vue-router的命令如下: 
     -- npm i vue-router@3.5.2 -S

2.2. 创建路由模块:

在src源代码目录下,新建router/index.js路由模块文件,并初始化如下代码:
// 1. 导入Vue 和VueRouter的包
import Vue from "vue";
import VueRouter from "vue-router"
import Home from "../components/Home.vue"
import Move from "../components/Move.vue"
import About from "../components/About.vue"

// 2. 调用Vue.use()函数,把VueRouter 安装为Vue的插件
Vue.use(VueRouter) 

// 3. 创建路由的实例对象
const router = new VueRouter({
  // routes是一个数组,作用: 定义"hash地址" 与 "组件"之间的对应关系
  routes:[
    // {path:'展示的路由地址', component: "要展示的组件"}
    {path:'/home', component: Home},
    {path:'/about', component: About},
    {path:'/move', component: Move}
  ]
})

// 4. 向外共享路由的实例对象
export default router;

2.3 在main.js 中引入router.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router"
Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

2.4 在页面中如何去使用Vue 的router(路由)

<template>
  <div id="app">
    <div class="app-com">
      <h1 class="title">App2 根组件</h1>
    </div>
    <hr />
    
    <!-- 
      当安装和配置了 vue-router后,就可以使用router-link来替代普通的a链接了 
      1. to属性: 添加要跳转的路径和router/index.js 中的path:"/home"对应的路径就可以了,类似a链接的href属性
    -->
    <!-- <a href="/home"></a> -->
    <router-link to="/home">首页</router-link>
    <router-link to="/move">电影</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 
          只要在项目中安装和配置了vue-router,就可以使用router-view这个组件了,
          他的作用很单纯:占位符,如果没有这个玩意的话你的所有的组件都不会渲染出来
     -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {},
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
#app {
  .app-com {
    background-color: #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
    .title {
      height: 60px;
      line-height: 60px;
      background-color: #ccc;
      text-align: center;
      padding: 20px 0;
      margin-bottom: 10px;
    }
    .comp-box {
      display: flex;
      a {
        padding: 0 10px;
      }
    }
  }
}
</style>

实际截图

image.png

/*************************************************/

三.路由重定向redirect

当你刚进来的时候 或者当你切换地址栏路径到斜杠的时候,你会发现啥都不会显示的时候,这种就要用到重定向了

image.png
import Vue from "vue";
import VueRouter from "vue-router"
import Home from "../components/Home.vue"
import Move from "../components/Move.vue"
import About from "../components/About.vue"

Vue.use(VueRouter) 

const router = new VueRouter({
  // routes是一个数组,作用: 定义"hash地址" 与 "组件"之间的对应关系
  routes:[
    // {path:'展示的路由地址', component: "要展示的组件"}
    // 当用户访问 / 时候,通过 redirect 属性跳转到 /home 对应的路由规则
    {path:"/",redirect:'/home'},
    {path:'/home', component: Home},
    {path:'/about', component: About},
    {path:'/move', component: Move}
  ]
})

export default router;

使用了redirect指定了默认组件以后 当你切换到 / 的时候就不会出现空白页面了

/********************************************/

四.嵌套路由(子路由,在子路由中的path:"tab1",在tab1前面千万不要加 / , 不然组件是出不来的):

1.首先分析: 当你在父组件中点击跳转到某一个子组件中,然后子组件下面还有子路由,这种就叫嵌套路由

2.如下是嵌套路由的一个展示图:

image.png

3.声明嵌套路由的规则:

image.png

4. 嵌套路由的整个代码实现过程如下:

image.png

5.子路由重定向redirect

const router = new VueRouter({
  // routes是一个数组,作用: 定义"hash地址" 与 "组件"之间的对应关系
  routes: [
    // {path:'展示的路由地址', component: "要展示的组件"}
    // 当用户访问 / 时候,通过 redirect 属性跳转到 /home 对应的路由规则
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    { path: "/move", component: Move },
    {
      path: "/about",
      component: About,
      redirect: "/about/tab1", // 这个重定向可以
      children: [
        // { path: "", redirect: "tab1" }, // 这个重定向也可以
        {
          path: "tab1", // tab1 前面千万不要加 /
          component: Tab1,
        },
        {
          path: "tab2", // tab2 前面千万不要加 /
          component: Tab2,
        },
      ],
    },
  ],
});

/********************************************/

五.动态路由

1.什么是动态路由呢?

例如: 当你进入到自己喜欢的鞋子界面的时候,你想看具体的鞋子的时候,你点击你选中的那个鞋子查看当前写的详情,那么此时就要是用到动态路由

2. 动态路由的基本是用图:

image.png

3.动态路由的基本用法:

image.png

4.动态路由的具体代码实现:

image.png

5. 为路由开启props传参,是用$route.params.XXXX 的传参方式太麻烦了

image.png

6. 扩展和 query 和fullPath

截图展示:


image.png
1. <router-link to="/move/1">洛基</router-link>
    --- 注意: 在hash地址中, / 后面的都叫"路径参数"
    --- 在路由"参数对象"中,需要使用$route.params来访问路径参数

2. <router-link to="/move/2?name=zs&age=20">洛基</router-link>
   --- 注意在hash 地址中? 后面的参数项,叫做''查询参数''
   --- 在路由"参数对象"中,需要使用this.$route.query 来访问参数

3. 注意: 在this.$route 中,path只是路径部分;fullPath是完整的地址
/move/2?name=zs&age=20 是fullPath的值
/move/2 是path的值

7. 动态拼接data中的数据

image.png

8. 路由懒加载的几种书写方式:

image.png

9. 路由的meta属性:

image.png

/************************************************************/

六.路由导航守卫

image.png

6.1 导航守卫

image.png

6.2 全局前置守卫 beforeEach

image.png

6.3 next()的3种调用方式

image.png

七.控制访问权限

router.beforeEach(function (to, from, next) {

  const token = localStorage.getItem('token'); // 拿到登录时后端返回的登录token
  
  if(to.path === "/main") { // 判断将要去的,是否 是/main页面

    if(token) { // 如果有token的话

      next() // 如果访问的是/main,也有token的话 那么就放行

    }else {

      next('/login'); // 如果访问的是/main,没有有token的话 那么就强行跳转到/login登录页

    }

  }else {

    next(); // 访问的不是后台主页,那么就直接放行

  }
  
});

八.需求: 当我们随便输入一个路径的时候,没有这个路由 让我们显示一个对应的Page Not Found 该咋怎么做了?

image.png

九.如果你想拿到用户输入的乱七八糟的东西的话:

image.png
Vue2.0sectionimagesupload

有关Vue_前端路由详细说明2.0的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use

  3. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  4. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  5. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  7. spring.profiles.active和spring.profiles.include的使用及区别说明 - 2

    转自:spring.profiles.active和spring.profiles.include的使用及区别说明下文笔者讲述spring.profiles.active和spring.profiles.include的区别简介说明,如下所示我们都知道，在日常开发中,开发|测试|生产环境都拥有不同的配置信息如：jdbc地址、ip、端口等此时为了避免每次都修改全部信息，我们则可以采用以上的属性处理此类异常spring.profiles.active属性例：配置文件,可使用以下方式定义application-${profile}.properties开发环境配置文件:application-dev

  8. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

  9. ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。

  10. ruby - Jekyll 2.0 中的 SCSS 生成错误 - 2

    我的项目布局如下:-Project-css-import.scss-_sass/main.scssimport.scss的内容是:------@import"main.scss";我期望发生的是将main.scss导入到import.scss中，然后，import.scss将在生成的_site/目录中编译为import.css。相反，我收到以下错误Conversionerror:Therewasanerrorconverting'css/import.scss'.jekyll2.0.3|Error:InvalidCSSafter"-":expectednumberorfunction,

随机推荐