vue全家桶（三）前端路由

于 2023-01-31 23:45:31 发布
阅读量244 收藏 1
点赞数
分类专栏： 前端开发 10. Vue.js项目实战开发 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ingenuou_/article/details/128799127
版权

vue全家桶（三）前端路由

1.路由的概念

1.1路由

路由是一个比较广义和抽象的概念，路由的本质就是对应关系
在开发过程中，路由分为后端路由，前端路由

  • 后端路由
    概念：根据不同的用户URL请求，返回不同的内容
    本质：URL请求地址与服务器资源之间的对应关系

  • 前端路由
    概念：根据不同的用户事件，返回不同的内容
    本质：用户事件与事件处理函数之间的对应关系

1.2vue Router

vue Router是vue.js官方的路由管理器
https://router.vuejs.org/zh/
它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

2.vue-router的基本使用步骤

2.1基本使用步骤

  1. 引入相关库文件
  2. 添加路由链接
  3. 添加路由填充位
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到vue实例中

2.2路由重定向

路由的重定向值得是：
用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面

router-link
请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

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

<!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>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
        <router-link to="/user">User1</router-link>
        <router-link to="/register">Register1</router-link>

        <!-- 路由占位符 -->
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <script>
        const User = {
            template: '<h1>User2 组件</h1>'
        }
        const Register = {
            template: '<h1>Register2 组件</h1>'
        }

        // 创建路由实例对象
        const router = new VueRouter({
            // 所有的路由规则
            routes: [
            //其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
            { path: '/', redirect: '/user'},
            {
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        })
        // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            // 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>
    <!-- 导入 vue 文件 -->
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
</head>

<body>
    <!-- 被 实例所控制的区域 -->
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!--使用 router-link 组件进行导航 -->
            <!--通过传递 `to` 来指定链接 -->
            <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
            <router-link to="/">Go to Home1</router-link>
            <router-link to="/about">Go to About1</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <script>
        // 1. 定义路由组件.
        // 也可以从其他文件导入
        const Home = {
            template: '<div>Home2</div>'
        }
        const About = {
            template: '<div>About2</div>'
        }
        // 2. 定义一些路由
        // 每个路由都需要映射到一个组件。
        // 我们后面再讨论嵌套路由。
        const routes = [{
            path: '/',
            component: Home
        }, {
            path: '/about',
            component: About
        }, ]
        // 3. 创建路由实例并传递 `routes` 配置
        // 你可以在这里输入更多的配置，但我们在这里
        // 暂时保持简单
        const router = VueRouter.createRouter({
                // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
                history: VueRouter.createWebHashHistory(),
                routes, // `routes: routes` 的缩写
            })
            // 5. 创建并挂载根实例
        const app = Vue.createApp({})
            //确保 _use_ 路由实例使
            //整个应用支持路由。
        app.use(router)
        app.mount('#app')
    </script>
</body>
</html>

3.vue-router的嵌套路由用法

3.1嵌套路由的用法

1.嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容
<!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>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>
      <!-- 路由占位符（控制组件的显示位置） -->
      <router-view></router-view>
    </div>
    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>
          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>
          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }
      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }
      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // 通过children属性 为/register添加子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

4.vue-router动态路由匹配用法

通过动态路由参数的模式进行路由匹配

如果使用$route.params.id来获取路径传参的数据不够灵活。
1.我们可以通过props来接收参数，
在这里插入图片描述

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>
        <router-link to="/register">Register</router-link>
        <router-link to="/list/1">list1</router-link>
        <router-link to="/list/2">list2</router-link>
        <router-link to="/info/1">info1</router-link>
        <router-link to="/info/2">info2</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

    <script>
        const User = {
            props: ['id'],
            template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
        }
        const Register = {
            template: '<h1>Register 组件</h1>'
        }
        const list = {
            template: '<h1>list 组件 -- 用户id为: {{$route.params.id}}</h1>'
        }
        const info = {
                props: ['id', 'uname', 'age'],
                template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
            }
            // 创建路由实例对象
        const router = new VueRouter({
                // 所有的路由规则
                routes: [{
                        path: '/',
                        redirect: '/user'
                    }, {
                        path: '/user/:id',
                        component: User,
                        props: true
                    }, {
                        path: '/register',
                        component: Register
                    }, {
                        path: '/list/:id',
                        component: list
                    }, {
                        path: '/info/:id',
                        component: info,
                        props: route => ({
                            uname: 'aaa',
                            age: 20,
                            id: route.params.id
                        })
                    },

                ]
            })
            // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            router
        })
    </script>
</body>

5.vue-router命名路由用法

<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { id: 13 } })

{
    // 命名路由
    name: 'user',
    path: '/user/:id',
    component: User,
    props: route => ({ uname: 'zs', age: 20, id: route.params.id })
},

6.vue-router编程式导航用法

6.1 页面导航的两种方式

  • 声明式导航：通过点击链接实现导航的方式
    例如：普通网页中的<a></a>链接，或者vue中的<router-link></router-link>
  • 编程式导航：通过调用javascript形式的API实现导航的方式
    普通网页中的localtion.href

6.2 编程式导航基本用法

常用的编程式导航API如下：

  • this.$router.push(‘hash地址’)
  • this.$router.go(n)
// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

router.push()方法的参数规则
在这里插入图片描述

7.能够基于路由方式实现业务功能

加蓓努力我先飞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue前端路由
HiterCoder
04-24 296
1、Vue路由，路由的基本概念与原理。 答：1）、路由是一个比较广义和抽象的概念，路由的本质就是对应关系。2）、在开发中，路由分为，后端路由和前端路由。3）、后端路由，根据不同的用户URL请求，返回不同的内容。后端路由的本质就是URL请求地址与服务器资源之间的对应关系。后端路由根据不同的URL地址分发不同的资源。4）、前端路由，根据不同的用户事件，显示不同的页面内容。本质就是用户事件与事...
2024年前端最全vue路由详解版一目了然，字节前端面试必问
最新发布
2401_84411433的博客
05-06 565
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
vue前端路由
heartToSky的博客
01-23 868
在前端的发展中经历了模板引擎渲染，ajax渲染和前端路由三个进程 模板引擎后端渲染 在最开始用户向服务段发起访问请求时，后端拿出请求的页面和相关的数据，用一套模板引擎，将需要替换的内容做特殊标记，然后通过正则找到并且替换为需要的数据，此时后端直接渲染好了整个页面，然后将该页面传递用户端，这样的好处是用户一次可以拿到整个页面，也有利于SEO优化 ajax 当ajax技术出现后，以ajax为核心的无刷新部分内容渲染开始变得主流，当用户向后端发起访问请求时，后端会根据不同URL传递不同的页面，然后在加载过程中用a
尚硅谷_Vue全家桶,尚硅谷vue全家桶word文档
09-10
尚硅谷提供的"Vue全家桶"教程涵盖了Vue的核心概念、组件化开发、路由、状态管理等多个方面，旨在帮助开发者全面掌握Vue.js技术栈。在这个压缩包中，包含了一个名为"尚硅谷_Vue全家桶.pdf"的文件，它很可能是详细的...
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
"尚硅谷_Vue全家桶.docx"可能是一份详细的教学文档，涵盖了Vue.js的基础知识，如模板语法、组件、指令、计算属性和侦听器，以及更高级的主题，如Vuex的状态管理、Vue Router的路由配置和Vue CLI的使用。这份文档可能...
配置好的vue全家桶
03-27
"Vue全家桶"是社区常用的一个术语，指的是Vue.js与其他配套库和工具的集合，这些工具共同构成了一套完整的前端开发解决方案。在这个配置好的“Vue全家桶”中，包含了以下几个关键组件： 1. **Vue Router**：这是Vue...
社交网站源码，Vue全家桶
07-06
Vue.js，通常被称为“Vue全家桶”，包含了Vue.js核心库以及一系列配套工具，如Vuex（状态管理）、Vue Router（路由管理）、Vue CLI（命令行工具）等，为开发复杂的前端应用提供了全面的解决方案。 【Vue.js】是尤雨...
全面介绍vue 全家桶和项目实例
08-28
Vue全家桶指的是 Vue.js 的生态系统，包括了 Vue.js 的核心库、Vuex 状态管理库、Vue Router 路由库、Vue Devtools 调试插件等。这些库和工具共同组成了一个强大的前端开发栈，帮助开发者快速构建复杂的Web应用程序...
10-06-vue-router 路由
ange997的博客
09-05 137
spa single-page application，单页应用。一个应用程序只有一个页面。 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内容（通过div切换显示和隐藏，或者是数据的渲染），从而实现U
Vue的前端路由
紫月i的博客
09-19 277
前端路由与后端路由： 后端路由：根据不同的请求地址响应不同的内容 Vue前端路由：通过改变URL的hash值，根据hash的变化控制组件的切换 前端路由用法： 点击a连接就会改变hash值 //监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件名称 window.onhashchange = function(){ //通过location.hash获取到最新的hash值 } Vue Router的基本使用： 官网：https://router.v
Vue 前端路由 vue-router
bujiongdan的博客
08-05 519
1、前端路由 后端路由：多页面，服务器端渲染好返回给浏览器。 前后端分离：后端只提供API来返回数据，前端通过ajax获取数据后，在通过一定的方式渲染到页面上。 SPA：前后端分离+前端路由。 SPA只有一个html文件，整个网站的所有内容都在这一个html里，通过js来处理。   2、vue-router 路由不同的页面事实上就是加载不同的组件。     需要安装vue-ro...
vue学习---前端路由
茹嗨瑞的博客
10-29 787
我们通过vue-cil脚手架工具创建的项目是单页面应用，我们把单页面应用称为single page app 简称spa，单页面就是只有一个html代码 Vue.js 路由允许我们通过不同的 URL 访问不同的内容（不同的组件）, 实现单页面应用的多页面切换效果。（通过url的改变切换不同的组件） Vue.js 路由需要载入 vue-router 库.vue-router 库是独立vue之外的，可以有也可以没有，若要实现不同的 URL 访问不同的内容（不同的组件）可以用vue-router，如果不用vue
Vue学习之前端路由
u012967454的博客
11-18 222
前端路由 什么是前端路由 路由是根据不同的url地址展示不同的内容或页面 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的 什么时候使用前端路由 在单页面应用，大部分页面结构不变，只改变部分内容的使用 优点： 用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点： 不利于SEO 使用浏览器的前进，后退键的时...
四、vue前端路由（轻松入门vue）
莫安逸无风雪
06-12 1870
Vue前端路由七、Vue前端路由1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由vue-router基本概念2. vue-router的基本使用基本使用步骤路由重定向3. vue-router嵌套路由嵌套路由功能分析实例demo4. vue-router动态路由匹配通过动态路由参数的模式进行路由匹配路由组件传递参数5. vue-router命名路由6. vue-router编程式导航 七、Vue前端路由 1. 路由的基本概念与原理 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 后端路
尚硅谷vue全家桶word
11-14
尚硅谷vue全家桶是一个web开发技术栈，集成了Vue.js框架、Vue Router、Vuex、Axios等主流的前端开发工具和库。Vue.js是一个轻量级、高效的JavaScript框架，适合构建单页面和动态网页应用。Vue Router是官方提供的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值