vue学习笔记-路由篇

最新推荐文章于 2023-12-04 15:29:12 发布
置顶 最新推荐文章于 2023-12-04 15:29:12 发布
阅读量206 收藏
点赞数
分类专栏： web前端-vue 文章标签： vue.js vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43069222/article/details/103403351
版权

什么是路由?

  • 路由就是通过url的地址去请求的资源，这个地址和资源有一种对应关系， 就被叫做路由

  • 路由分为前端路由和后端路由

    • 前端路由：通过hash值（锚链接）的变化实现
    • 后端路由：在服务器中实现，通过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>
</head>

<body>
    <div id="app">
        <div>
            <a href="#/nationNews">国内新闻</a>
            <a href="#/foreignNews">国际新闻</a>
            <a href="#/hotNews">热点新闻</a>
            <a href="#/playNews">娱乐新闻</a>
        </div>
        <hr />
        <component :is="componentId"></component>
    </div>

</body>
<script src="./lib/vue_2.5.22.js"></script>
<script>
    //点击a链接，就会改变url中的hash值，当hash发生变化时触发
    window.onhashchange = function () {
        console.log(location.hash)//获取hash值
        switch (location.hash.slice(1)) {//根据不同hash值实现路由切换
            case '/nationNews':
                vm.componentId = 'nation-news'
                break;
            case '/foreignNews':
                vm.componentId = 'foreign-news'
                break;
            case '/hotNews':
                vm.componentId = 'hot-news'
                break;
            case '/playNews':
                vm.componentId = 'play-news'
                break;
        }
    }

    //国内新闻组件
    var nationNews = {
        template: `
            <div><h1>国内新闻</h1></div>
        `
    }
    //国际新闻组件
    var foreignNews = {
        template: `
            <div><h1>国际新闻</h1></div>
        `
    }
    //热点新闻组件
    var hotNews = {
        template: `
            <div><h1>热点新闻</h1></div>
        `
    }
    //娱乐新闻组件
    var playNews = {
        template: `
            <div><h1>娱乐新闻</h1></div>
        `
    }
    //创建vue实例
    var vm = new Vue({
        el: "#app",
        data: {
            componentId: 'nation-news'//默认显示国内新闻
        },
        //注册组件
        components: {
            'nation-news': nationNews,
            'foreign-news': foreignNews,
            'hot-news': hotNews,
            'play-news': playNews
        }
    })

</script>

</html>

页面显示结果如下
在这里插入图片描述

Vue-Router

  • 它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器
  • 可以一起方便的实现SPA(single page web application),单页应用程序应用程序的开发

Vue-Router的特性

  • 支持H5历史模式或者hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由
  • 支持路由导航守卫
  • 支持路由过渡动画特效
  • 支持路由懒加载
  • 支持路由滚动行为

Vue-router使用步骤

  • 下载vue-router插件，https://router.vuejs.org/zh/installation.html
  • 引入vue-router
    -注意:要放置在vue.js后
  • 添加路由链接
    <router-link>
  • 添加路由填充位
    <router-view>
  • 定义路由组件
  • 配置路由
  • 挂载路由到vue实例中

示例代码如下

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <!-- 使用router-link代替a标签，router-link默认是a标签 to属性默认是href属性 -->
            <router-link to="/nationNews">国内新闻</router-link>
            <router-link to="/foreignNews">国际新闻</router-link>
            <router-link to="/hotNews">热点新闻</router-link>
            <router-link to="/playNews">娱乐新闻</router-link>
        </div>
        <hr />
        <!-- 路由填充位，组件要显示的位置 -->
        <router-view />
    </div>

</body>
<!-- 引入vue.js -->
<script src="./lib/vue_2.5.22.js"></script>
<!-- 引入vue-router.js必须放在vue.js后 -->
<script src="./lib/vue-router_3.0.2.js"></script>
<script>

    //国内新闻组件
    var nationNews = {
        template: `
            <div><h1>国内新闻</h1></div>
        `
    }
    //国际新闻组件
    var foreignNews = {
        template: `
            <div><h1>国际新闻</h1></div>
        `
    }
    //热点新闻组件
    var hotNews = {
        template: `
            <div><h1>热点新闻</h1></div>
        `
    }
    //娱乐新闻组件
    var playNews = {
        template: `
            <div><h1>娱乐新闻</h1></div>
        `
    }

    //创建vue-router实例
    //这里的VueRouter是vue-router.js中提供的
    var router = new VueRouter({
        //配置路由规则,因为有多个路由，所以routes属性是一个数组,存放的是路由对象
        routes: [
            //设置默认页面,redirect表示要被重定向的新地址,这里默认重定向到国内新闻
            { path: '/', redirect: '/nationNews' },
            //path页面的地址,component组件对象
            { path: '/nationNews', component: nationNews },
            { path: '/foreignNews', component: foreignNews },
            { path: '/hotNews', component: hotNews },
            { path: '/playNews', component: playNews },
        ]
    })
    //创建vue实例
    var vm = new Vue({
        el: "#app",
        //将router挂载到vue实例中
        router: router
    })

</script>

</html>

嵌套路由

  • 有时候可能在某一个组件中又包含着子级路由链接，这时需要使用嵌套路由实现

示例代码如下:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <!-- 使用router-link代替a标签，router-link默认是a标签 to属性默认是href属性,to属性的值会被渲染为#开头的hash地址 -->
            <router-link to="/nationNews">国内新闻</router-link>
            <router-link to="/foreignNews">国际新闻</router-link>
            <router-link to="/hotNews">热点新闻</router-link>
            <router-link to="/playNews">娱乐新闻</router-link>
        </div>
        <hr />
        <!-- 路由填充位，组件要显示的位置 -->
        <router-view />
    </div>

</body>
<!-- 引入vue.js -->
<script src="./lib/vue_2.5.22.js"></script>
<!-- 引入vue-router.js必须放在vue.js后 -->
<script src="./lib/vue-router_3.0.2.js"></script>
<script>

    //国内新闻组件
    //只做演示，这里只写一个嵌套路由
    var nationNews = {
        template: `
            <div>
                <h1>国内新闻</h1>
                <router-link to="/nationNews/heatRanking">热度排行榜</router-link>
                <router-view/>
            </div>
        `
    }
    //国际新闻组件
    var foreignNews = {
        template: `
            <div><h1>国际新闻</h1></div>

        `
    }
    //热点新闻组件
    var hotNews = {
        template: `
            <div><h1>热点新闻</h1></div>
        `
    }
    //娱乐新闻组件
    var playNews = {
        template: `
            <div><h1>娱乐新闻</h1></div>
        `
    }
    //热度排行榜组件
    var heatRanking = {
        template: `
            <div><h2>热度排行榜</h2></div>
        `
    }
    //创建vue-router实例
    //这里的VueRouter是vue-router.js中提供的
    var router = new VueRouter({
        //配置路由规则,因为有多个路由，所以route属性是一个数组,存放的是路由对象
        routes: [
            //设置默认页面,redirect表示要被重定向的新地址,这里默认重定向到国内新闻
            { path: '/', redirect: '/nationNews' },
            //path页面的地址,component组件对象
            {
                path: '/nationNews',
                component: nationNews,
                children: [{//children属性仍然是一个数组，存放的是路由对象
                    path: 'heatRanking',//这种方式前面不能带'/',还有另一种方式:/nationNews/heatRanking
                    component: heatRanking
                }]
            },
            { path: '/foreignNews', component: foreignNews },
            { path: '/hotNews', component: hotNews },
            { path: '/playNews', component: playNews },
        ]
    })
    //创建vue实例
    var vm = new Vue({
        el: "#app",
        //将router挂载到vue实例中
        router: router
    })

</script>

</html>

页面显示结果如下
在这里插入图片描述

动态路由

先看一段代码

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <router-link to="/user">显示用户列表</router-link>
        </div>
        <!-- 路由填充位，组件要显示的位置 -->
        <router-view />
    </div>

</body>
<!-- 引入vue.js -->
<script src="./lib/vue_2.5.22.js"></script>
<!-- 引入vue-router.js必须放在vue.js后 -->
<script src="./lib/vue-router_3.0.2.js"></script>
<script>

    //用户列表
    var user = {
        template:
            `
            <div>
                <h1>用户列表</h1>
                <router-link to="/user/1">用户1</router-link>
                <router-link to="/user/2">用户2</router-link>
                <router-link to="/user/3">用户3</router-link>
                <router-link to="/user/4">用户4</router-link>
                <router-view/>
            </div>
            
        `
    }
    //用户1组件
    var user1 = {
        template: `
            <div>
                <h1>用户信息如下</h1>
                <span>姓名:张三</span></br>
                <span>性别:男</span></br>
                <span>年龄:18</span></br>
            </div>
        `
    }

    //用户2组件
    var user2 = {
        template: `
            <div>
                <h2>用户信息如下</h2>
                <span>姓名:李四</span></br>
                <span>性别:男</span></br>
                <span>年龄:19</span></br>
            </div>
        `
    }
    //用户3组件
    var user3 = {
        template: `
            <div>
                <h2>用户信息如下</h2>
                <span>姓名:王丹</span></br>
                <span>性别:女</span></br>
                <span>年龄:20</span></br>
            </div>
        `
    }
    //用户4组件
    var user4 = {
        template: `
            <div>
                <h2>用户信息如下</h2>
                <span>姓名:赵柳</span></br>
                <span>性别:男</span></br>
                <span>年龄:18</span></br>
            </div>
        `
    }

    //创建vue-router实例
    //这里的VueRouter是vue-router.js中提供的
    var router = new VueRouter({
        //配置路由规则,因为有多个路由，所以route属性是一个数组,存放的是路由对象
        routes: [
            //path页面的地址,component组件对象
            {
                path: '/user',
                component: user,
                //children属性仍然是一个数组，存放的是路由对象
                children: [
                    {
                        path: '1',//这种方式前面不能带'/',还有另一种方式:/user/1
                        component: user1
                    },
                    {
                        path: '2',//这种方式前面不能带'/',还有另一种方式:/user/2
                        component: user2
                    },
                    {
                        path: '3',//这种方式前面不能带'/',还有另一种方式:/user/3
                        component: user3
                    },
                    {
                        path: '4',//这种方式前面不能带'/',还有另一种方式:/user/4
                        component: user4
                    }
                ]
            },

        ]
    })
    //创建vue实例
    var vm = new Vue({
        el: "#app",
        //将router挂载到vue实例中
        router: router
    })

</script>

</html>

页面显示结果如下
在这里插入图片描述

  • 从代码中可以发现几个问题

    • 代码太冗余，大量重复代码
    • 每添加一个路由链接就需要添加一个路由对象，并且模板都是一样的
    • 如果有100个用户？需要添加100个吗？

为了解决这个问题，可以使用vue-router中的动态路由解决

示例代码如下:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <router-link to="/user">显示用户列表</router-link>
        </div>
        <!-- 路由填充位，组件要显示的位置 -->
        <router-view />
    </div>

</body>
<!-- 引入vue.js -->
<script src="./lib/vue_2.5.22.js"></script>
<!-- 引入vue-router.js必须放在vue.js后 -->
<script src="./lib/vue-router_3.0.2.js"></script>
<script>

    //用户列表,一般会调用后台接口遍历用户，这里不做演示
    var user = {
        template:
            `
            <div>
                <h1>用户列表</h1>
                <router-link to="/user/1">用户1</router-link>
                <router-link to="/user/2">用户2</router-link>
                <router-link to="/user/3">用户3</router-link>
                <router-link to="/user/4">用户4</router-link>
                <router-view/>
            </div>
            
        `
    }
    //用户信息组件
    var userInfo = {
        props: ["id"],//通过props获取参数，我们可以根据id查询用户信息再渲染到模板中，这里不做演示
        template: `
            <div>
                <h1>用户信息如下</h1>
                <span>用户id:{{id}}</span></br>
                <span>姓名:张三</span></br>
                <span>性别:男</span></br>
                <span>年龄:18</span></br>
            </div>
        `
    }

  

    //创建vue-router实例
    //这里的VueRouter是vue-router.js中提供的
    var router = new VueRouter({
        //配置路由规则,因为有多个路由，所以route属性是一个数组,存放的是路由对象
        routes: [
            //path页面的地址,component组件对象
            {
                path: '/user',
                component: user,
                //children属性仍然是一个数组，存放的是路由对象
                children: [
                    //通过/:参数名  的形式传递参数 
                    //如果props设置为true，route.params将会被设置为组件属性
                    {
                        path: ':id',//这种方式前面不能带'/'
                        component: userInfo,
                        props:true
                    },
                ]
            },

        ]
    })
    //创建vue实例
    var vm = new Vue({
        el: "#app",
        //将router挂载到vue实例中
        router: router
    })

</script>
</html>

页面显示结果如下:
在这里插入图片描述

  • 这样一来，解决了以上问题，可以根据动态路由显示不同用户信息

补充

  • prop还可以是对象，将prop设置为对象形式
props:{username:'李四',age:18}
  • prop也可以是动态传参+对象，将prop设置为函数形式
props:(route)=>{
      	return {username:"jack",pwd:123,id:route.params.id}
      }

命名路由

  • 给路由取别名
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

<router-link 
	//可以使用别名进行跳转
	:to="{ name: 'user', params: { id: 1}}">用户1
</router-link>

编程式导航

页面导航有两种方式

  • 声明式导航:通过点击链接的方式实现的导航
  • 编程式导航：调用js的api方法实现导航

vue-router中的编程式导航
router.push()

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.go()

this.$router.go( n );//n为数字，参考history.go

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)
VickQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由学习笔记
m0_48895748的博客
12-13 442
路由学习笔记整理
Vue路由笔记
a15180180753的博客
11-28 260
Vue.js路由：个人理解为单页面显示不同组件 //cdn go to Foo //映射为a标签，to为href go to bar //显示路由映射的组件 1.定义组件 const Foo = { template: "this is foo"} const Bar = { template: "this is bar"} 2.路由映射组件 c
vue路由笔记
刘开建的博客
11-25 136
跳转页面的时候 &lt;router-link&gt; 的路由写的是你路由里配置的path值 编程式路由this.$router.push 如果你填写的参数是name那就用路由里配置的name值 如果是path就用path值 routes: [ { path: '/', //path值 name: 'Home', //name值 ...
Vue 路由 (笔记)
PorkCanteen的博客
10-07 213
前端路由的概念与原理 1. 什么是路由 路由（英文：router）就是对应关系 3. SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 4. 什么是前端路由 通俗易懂的概念：Hash 地址与组件之间的对应关系。 5. 前端路由的工作方式 ① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 H
Vue-router学习笔记
01-27
Vue-router是Vue.js框架的重要组成部分，它作为官方的路由管理器，使得构建单页面应用程序变得更加简单。Vue-router的核心功能包括： 1. **嵌套的路由/视图表**：允许你创建复杂的路由结构，一个路由可以有多个子...
vue学习笔记，学习vue从0-1的步骤
09-21
Vue.js 是一个流行的前端...学习Vue.js从0到1的过程通常包括理解上述概念，练习创建简单的组件和路由，然后逐渐深入到Vuex状态管理和与其他后端服务的交互。通过实际项目来实践这些知识，将有助于加深理解并提升技能。
vue-tutorial：一些vue-tutorial-《 Vue学习笔记》
02-06
在“vue-tutorial”这个项目中，我们将会深入探讨Vue的基础知识以及与其相关的扩展技术，如Vuex状态管理库和vue-router路由管理器。 首先，让我们从Vue的核心概念开始。Vue通过声明式的模板语法使得数据绑定变得...
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 深度集成，使得构建单页面应用（SPA）变得更加简单。Vue Router 提供了基于路径的导航守卫、动态路由匹配、命名视图等特性，让应用中的路由管理变得灵活且高效...
vue路由文档笔记
weixin_30538029的博客
08-20 176
引入router this.$router 和 router 使用起来完全一样。我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由 可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由： this.$router.go(-1) this.$router.push('/') this...
Vue路由自学笔记
m0_62475892的博客
04-14 224
我。
Vue路由的学习笔记
qq_43750134的博客
07-28 141
Vue-router学习笔记以及知识点
Vue路由学习笔记
qq_43502151的博客
12-05 189
Vue学习笔记 前端路由 单页应用(single page web application，SPA)，是在一个页面完成所有的业务功能，浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面完成，这一切都由JavaScript来控制。 单页应用优缺点 优点 操作体验流畅 完全的前端组件化 缺点 首次加载大量资源(可以只加载所需部分) 对搜索引擎SEO不友好 -> 服务端渲染 开发难度相对较高 单页应用的实现原理 前后端分离(后端专注于数据、前端专注于交
vue笔记（三）vue路由
gcc_java的博客
05-31 366
这里增改转发一篇xing.org1的博客。1，作用：路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件。2，安装本地环境安装路由插件vue-router：npm install vue-router --save-dev 3，配置在src/router/index.js中：    1：引入，注意这个Router是自定义的名字，这里叫这个名字后，下面会用到import Vue ...
VueRouter（vue-router 路由）最全笔记，实战实用，通俗易懂
m0_56833112的博客
01-26 1928
VueRouter安装和使用vue-router安装模块化中使用使用vue-router的步骤使用history模式router-link重定向/默认路由点击事件跳转路由动态路由路由懒加载路由嵌套参数传递(一)路由元信息全局导航守卫前置全局后置钩子组件内守卫路由独享的守卫keep-alive 注意 URL：协议://主机:端口/路径?查询(query) 所有的组件都继承自Vue类的原型 打包：npm run build redirect：[ˌriːdəˈrekt ] 重定向 replace：没有返回箭头
vue路由 学习复习笔记(三)，包括（vue路由、声明式导航、编程式导航、重定向、嵌套和守卫、Vant组件库等）
weixin_60896381的博客
07-15 254
本文包含vue路由等内容，参考于黑马PPT通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue路由、声明式导航、编程式导航、重定向、嵌套和守卫、Vant组件库等）如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正...
Vue学习笔记之路由
最新发布
bfbshs_ddd的博客
12-04 1332
开发项目涉及多个页面多个组件，故必定涉及到路由，记录了相关的知识点：路由实现、懒加载、路由模式、全局变量、嵌套路由、重定向、别名以及导航守卫
Vue学习笔记-路由机制
zhou8023ddw的博客
06-26 473
    Vue的路由机制通过vue-route实现，需要注意的是vue-router@2.x 只适用于 Vue 2.x 版本。vue-router@1.x 对应于Vue1.x版本。vue-route的安装和使用CDN连接：https://unpkg.com/vue-router/dist/vue-router.jsnpm安装：npm install vue-route  直接引用js文件&lt;s...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值