VUE 入门笔记，高级（二）--路由：#后端黑客的路由

最编程 2024-03-14 16:27:46

...

vue是如何做到使后端乖乖交出view层的控制权的?,难道是直接使用window.location.href = url吗?

其实学过路由才知道, 使用的是vue-router,一个官方提供的路由框架,可以使用我通过组合组件来组成应用程序,仰仗它的路由插件vue-router,我们轻松控制页面的切换

我们要做的就是将组件components映射到routers,然后告诉vue-router到哪里去渲染他们

定义路由器#

安装插件

npm install vue-router --save

编码,其实大家都会把关于路由的编码单独放到一个叫router的文件夹中,而且,它的编码基本上是机械化的编码,分为如下几步

引入Vue,VueRouter
声明Vue.use(VueRouter)
引入路由组件
对外暴露路由器对象,并且把路由组件配置进路由器对象

注意点 下面的配置部分, routes 不写乱写!!!

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from './Home.vue'
import About from './About.vue'
import Me from './Me.vue'
export default new VueRouter({
// 添加路由
routes:[
{
   path:'/home',
   component:Home,
   meta:{
       // 添加自定义的字段,可以当成flag,也可以文本
   }
},
{
   path:'/about',
   component:About,
   meta:{
       // 添加自定义的字段,可以当成flag,也可以文本
   },
   childred:[ // 嵌套路由
        { 
            path:'/about',
            component:About,
            meta:{
                  // 添加自定义的字段,可以当成flag,也可以文本
                 }
        }
   ]
   }
},
{
    path:'', // 默认访问空的话,重定向到/home
    redirect:'/home'
}
]
})

使用路由进行页面的跳转#

原来进行页面的跳转我们通常使用a标签,(一般把a标签设计成按钮,或者导航栏的样子,点击发送请求,进而跳转页面了), 而vue的路由其实和a标签差不多,我们使用vue的 router-link标签替换a标签

<router-link to:'/about' class="可以让我看起来像按钮的css样式"> </router-link>
<router-link to:'/home' class="可以让我看起来像按钮的css样式"> </router-link>
<router-view ></router-view>

这样用户点击 router-link,就会把相应的子组件移植到标签块中

补充:

属性	类型	含义
to	string \| Location	表示目标路由的链接。当被点击后，内部会立刻把 `to` 的值传到 `router.push()`，所以这个值可以是一个字符串或者是描述目标位置的对象。
replace	boolean	设置 `replace` 属性的话，当点击时，会调用 `router.replace()` 而不是 `router.push()`，于是导航后不会留下 history 记录。
append	boolean	设置 `append` 属性后，则在当前（相对）路径前添加基路径。例如，我们从 `/a` 导航到一个相对路径 `b`，如果没有配置 `append`，则路径为 `/b`，如果配了，则为 `/a/b`

回退到上一个路由#

我们可以在按钮上添加下面的动作,是路由回退一级

<button @click="$router.back()"></button>

缓存路由组件#

使用如下标签包裹我们的router-view,这样当我们再回退到上一个路由时,用户加进去的状态依然存在

<keep-alive>
 <router-view ></router-view>
</keep-alive>

$router与$route#

$router是路由器对象,说白了就是用它去跳转页面,美其名曰:编程式路由导航

$route是路由对象,说白了就是某一个路由对象,既然是某一个,就不能进行页面的跳转,相反是可以获取出当前路由组件的属性,它的结构图如下:

$route的组成图

网络异常，图片无法展示

向路由组件传递值一#

需求: 我们想发送这样的请求 http:localhost:8080/home/1/羊肉串,在路径上携带着参数1

路由怎么接收参数呢?--> 使用:占位

export default new VueRouter({
// 添加路由
routes:[
{
   path:'/home/:id/:type', // 如果想在路径上传递值进来,就使用:占位
   component:Home,
   meta:{
       // 添加自定义的字段,可以当成flag,也可以文本
       flag:true
   }
},

当我们添加了/:之后,它的组成结构就变成了这个样子

像下面这样传递值进去,发起请求

<router-link to:`/home/${id}/${type}` class="可以让我看起来像按钮的css样式"> </router-link>

同时,我们也可以向下面这样使用$route. 在对应不同的路由组件中,把里面的属性取出来, 注意啊,这样取值,前提是我们前面使用 /:id占位,并且也整整传递值进去了

<h1>id= {{$route.params.id}}</h1>

向路由组件传递值二#

使用<router-view >标签传递值

<router-view msg='abc'></router-view>

在路由组件中通过props取出值,然后可以直接使用

export default{
    props:[
      msg:String
    ]
}

编程式的路由导航#

编程式的路由导航说白了就是,不用router-link标签转而使用代码路由的跳转呗, 举个例子,我们使用手机qq,最下面有几个导航栏,点击不同的按钮转换到不同的页面去,如果用编程式的路由导航就很好做

第一步就是将需要的路由组件配置进路由器
给按钮绑定上点击事件
点击事件触发我们所谓的编程式路由导航

vue提供了两种编程式的路由导航实现

第一种:
这种常用的一种

this.$router.replace(`/home/${id}`)

第二种:
这种具有栈的特性,也就是说,用户点击返回键,会返回到上一级路由

this.$router.push(`/home/${id}`)

上一篇： Vue2 到 Vue3 过度核心技术声明式导航

下一篇： vue技术栈