Vue-路由学习

最新推荐文章于 2024-01-09 14:12:49 发布
最新推荐文章于 2024-01-09 14:12:49 发布
阅读量243 收藏
点赞数 1
分类专栏： Vue 知识点笔记总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44503730/article/details/112971252
版权

什么是路由

  1. 后端路由:对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

  2. 前端路由:对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

  3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 vue 中使用 vue-router

使用tag属性指定router-link渲染的标签类型


    <!-- router-link 默认渲染为一个a 标签 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>

设置路由重定向

    var router = new VueRouter({
      routes: [ // 路由规则数组
      //路由的重定向
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
 
  routes: [
      linkActiveClass: 'myactive' 
    })

设置路由高亮(每次路由切换成功进入激活状态)

  .router-link-active 是路由自带的样式类名
    linkActiveClass: 'myactive'   //将 .router-link-active  改为myactive

在这里插入图片描述

    var router = new VueRouter({
      routes: [ // 路由规则数组
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      // 和激活相关的类 linkActiveClass !! 
      //设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置
  routes: [
      linkActiveClass: 'myactive' 
    })

设置路由切换动效

具体使用看下面的完整例子

完整例子

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1. 安装 vue-router 路由模块 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
  <style>
    .router-link-active,
    .myactive {
      color: red;
      font-weight: 800;
      font-style: italic;
      font-size: 80px;
      text-decoration: underline;
      background-color: green;
    }

    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(140px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- <a href="#/login">登录</a> -->
    <!-- <a href="#/register">注册</a> -->

    <!-- router-link 默认渲染为一个a 标签 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>


    <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->
    <!-- 所以： 我们可以把 router-view 认为是一个占位符 -->
    <transition mode="out-in">
      <router-view></router-view>
    </transition>

  </div>

  <script>
    // 组件的模板对象
    var login = {
      template: '<h1>登录组件</h1>'
    }

    var register = {
      template: '<h1>注册组件</h1>'
    }


    /*  Vue.component('login', {
       template: '<h1>登录组件</h1>'
     }) */

    // 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
    // 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
    var routerObj = new VueRouter({
      // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
      routes: [ // 路由匹配规则 
        // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
        //  属性1 是 path， 表示监听 哪个路由链接地址；
        //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
        // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
        // { path: '/', component: login },
        { path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: routerObj // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
    });
  </script>
</body>

</html>

在路由规则中定义参数

  1. 在规则中定义参数：
{ path: '/register/:id', component: register }
  1. 通过 this.$route.params来获取路由中的参数：
var register = Vue.extend({
      template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
    });

方法一

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">

    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {
      template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
      data() {
        return {
          msg: '123'
        }
      },
      created() { // 组件的生命周期钩子函数  $route 表示(当前路由信息对象)
        // console.log(this.$route)
        // console.log(this.$route.query.id)
      }
    }

    var register = {
      template: '<h1>注册</h1>'
    }

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>
</body>

</html>

方法二

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">

    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
    <router-link to="/login/12/ls">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {
      template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
      data(){
        return {
          msg: '123'
        }
      },
      created(){ // 组件的生命周期钩子函数
        console.log(this.$route.params.id)
      }
    }

    var register = {
      template: '<h1>注册</h1>'
    }

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },
        { path: '/register', component: register }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>
</body>

</html>

使用 children 属性实现路由嵌套

  <div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 父路由中的组件
    const account = Vue.extend({
      template: `<div>
        这是account组件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    // 子路由中的 login 组件
    const login = Vue.extend({
      template: '<div>登录组件</div>'
    });

    // 子路由中的 register 组件
    const register = Vue.extend({
      template: '<div>注册组件</div>'
    });

    // 路由实例
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通过 children 数组属性，来实现路由的嵌套
            { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
            { path: 'register', component: register }
          ]
        }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>

命名视图实现经典布局

小例子

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    .header {
      background-color: orange;
      height: 80px;
    }

    h1 {
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    .container {
      display: flex;
      height: 600px;
    }

    .left {
      background-color: lightgreen;
      flex: 2;
    }

    .main {
      background-color: lightpink;
      flex: 8;
    }
  </style>
</head>

<body>
  <div id="app">

    <router-view></router-view>
    <div class="container">
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
    </div>

  </div>

  <script>

    var header = {
      template: '<h1 class="header">Header头部区域</h1>'
    }

    var leftBox = {
      template: '<h1 class="left">Left侧边栏区域</h1>'
    }

    var mainBox = {
      template: '<h1 class="main">mainBox主体区域</h1>'
    }

    // 创建路由对象
    var router = new VueRouter({
      routes: [
        /* { path: '/', component: header },
        { path: '/left', component: leftBox },
        { path: '/main', component: mainBox } */


        {
          path: '/', components: {
            'default': header,
            'left': leftBox,
            'main': mainBox
          }
        }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
</body>

</html>
  1. 标签代码结构：
<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>
  1. JS代码：
<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 创建路由对象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
  1. CSS 样式：
  <style>
    .header {
      border: 1px solid red;
    }

    .content{
      display: flex;
    }
    .sidebar {
      flex: 2;
      border: 1px solid green;
      height: 500px;
    }
    .mainbox{
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    }
  </style>
Muliminty
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue Router详解，Vue Router钩子函数详解
Niall_Tonshall的博客
03-01 1624
想必来查看笔者的这篇Vue Router文章的人，应该了解什么是Vue Router，至少知道其的作用是路由映射，所以笔者在这里不再赘述。 假设我们现在有一些简单的vue组件， MyHeader.vue: <template> <div class="container"> this is header of each page </div> </template> <script> export default { name
19 Vue-router参数
行走的皮卡丘
08-07 585
19 Vue-router参数
vue路由及参数router
nalanxiaoxiao2011的博客
01-09 1334
vue 路由route
Vue Router路由详解
月光晒了很凉快的博客
09-17 1780
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为hash: 使用 URL hash 值来作路由。
Vue学习笔记day04总结
Gavid的博客
12-05 239
目录 1.使用Vue中的ref属性获取DOM元素和组件 2.路由(router) 2.1基本概念 2.2 router 的基本使用(link、重定向、路由高亮、动画切换) 2.3路由传参 2.3.1方式1（使用查询(query)字符串进行传参） 2.3.2方式2（使用路由规则params方式进行传参） 2.4 路由嵌套 2.5命名视图实现经典布局 1.使用Vue中的ref属性获...
Vue-router学习笔记
01-27
Vue-router是Vue.js框架的重要组成部分，它作为官方的路由管理器，使得构建单页面应用程序变得更加简单。Vue-router的核心功能包括： 1. **嵌套的路由/视图表**：允许你创建复杂的路由结构，一个路由可以有多个子...
vue框架vue-next-admin-master.zip
最新发布
04-04
4. **Vue Router**：Vue Router 是官方的路由管理器，用于管理应用的路由，实现页面间的跳转和导航。在后台管理系统中，路由配置尤为重要，它定义了不同页面的访问路径。 5. **Axios**：通常 Vue 项目会使用 Axios ...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
在vue-admin-template中，学习如何配置路由，使用动态路由匹配和命名视图。 5. **axios**：常用于Vue项目的HTTP客户端，处理前后端数据交互。了解如何发起GET、POST请求，处理响应，以及错误处理。 6. **Element ...
vue-cli及vue路由学习
06-25
该资源涉及以下知识点：vue-cli的使用、vue路由（包括路由配置、路由传值、辅助路由、路由守卫、滚动行为）及vue项目打包问题，具体方法步骤，可以参考本人博客，博客地址:https://blog.csdn.net/qq_41115965
VueRouter之构建VueRouter对象以及new Vue涉及的处理
热门推荐
玉案轩窗的博客
07-19 1万+
前言 当程序加载执行完vue-router文件，就执行new VueRouter()动作以及new Vue()动作，本篇文章就是探究这两个过程对于路由具体的处理逻辑。 具体分析 new VueRouter() 在第一篇文章中的实例中，调用new VueRouter()来创建router对象，VueRouter()具体的处理逻辑如下： 从上面的处理逻辑中可以看出，new VueRout...
50、路由vue-router
sunnnnh的博客
06-10 2252
1、 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。 　　路由中有三个基本的..
Vue Router教程【超级详细】
weixin_46769087的博客
07-21 591
用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。
Vue路由（vue-router）详细讲解指南
精选资讯文章
06-05 6593
酷的同时也会给我们带来一些问题，因为使用路由参数时，从/user/xianyu导航到/user/mengxiang，原来的组件实例会被复用，两个路由都渲染同个组件，比起销毁再创建，显示复用显得效率更高，带来的的只管问题就是生命周期钩子函数不会再被调用，也就是不会再被触发；就这样，我们的页面就可以进行路由跳转和切换了，路由的基本使用就完成了；重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；
路由 router 的基础创建步骤
wangyangzxc123的博客
10-30 1329
创建一个新的脚手架 清除多余的文件 下载vue-router 在main.js中导入相关信息 import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' //这里是导入你所需要的文件 import Find from './views/Find.vue' import My from './views/My.vue' import Part from './views/Part.v.
Vue Router 学习 new Router
卡尔特斯
09-28 46
``` import Vue from 'vue' import Router from 'vue-router' import routes from './routes' Vue.use(Router) const router = new Router({ routes, // * 未添加 mode: http://localhost:8080/#/login // * 添加 ...
vue-router（路由）详细教程
m0_46484437的博客
04-22 2479
vue-router（路由）详细教程 一、Vue Router 回顾 1、路由简介 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： ​ 后端路由 ​ 前端路由 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFfXWjYv-1682154131731)(images/后端路由.png)] SPA（Single
vue-router
weixin_57748949的博客
05-23 313
1准备工作 建立vue.js项目文件夹，通过cmd命令，完成新建文件夹的相关项目配置 vue init webpack项目文件名 然后根据需要配置相关参数 cd进入项目文件名 npm i npm run dev 2在main.js文件中，进行关于app.vue的基础配置 引入vue 引入vue-router 引入各个路由对象 并配置路由路径和name import Vue from "vue"; import VueRouter from "vue-router"; Vue...
导航守卫|Vue Router
dingdeng7412的博客
09-18 151
导航守卫 导航守卫这一块，是通过Vue Router文档进行学习和总结 -链接地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 1.全局前置守卫 router.beforeEach((to,from,next)=>{}) 在实例化VueRouter的文件中,进行全局守卫的配置 ...
vue-router——重定向-redirect、过渡动画、路由钩子
qq_35574727的博客
08-07 9888
一.vue-router的重定向-redirect 有时候设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。 redirect基本重定向 我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。 export defa...
vue-router离线文档
01-14
Vue-router是Vue.js官方提供的用于构建单页面应用程序的路由管理器。它可以轻松地实现页面之间的切换和导航，并且支持动态路由和嵌套路由的功能。为了方便开发者学习和使用vue-router，官方提供了离线文档来帮助...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值