vue路由

最新推荐文章于 2022-10-19 21:26:42 发布

barnett_y

最新推荐文章于 2022-10-19 21:26:42 发布

阅读量212

点赞数

分类专栏：【Vue-Router点滴知识】

【Vue-Router点滴知识】专栏收录该内容

46 篇文章 5 订阅

订阅专栏

一、路由基础介绍

转载http://blog.poetries.top/archives/

1.1 什么是前端路由

路由是根据不同的url地址展示不同的内容或页面
前端路由就是把不同的路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的

1.2 什么时候使用前端路由

在单页面应用，大部分结构不变，只改变内容的使用

1.3 前端路由优点、缺点

优点：
- 用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：
- 不利于SEO
- 使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存
- 单页面无法记住之前滚动的位置，无法再前进，后退的时候记住滚动的位置

二、vue-router用来构建SPA

2.1 开始

在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

vue-router其实就是对history的封装
地址后面跟#其实就是用了hash

<div id="box"> 

</div>
<!--定义模版-->
<template id="a">
    <div>
        第一个router
    </div>
</template>
<template id="b">
    <div>
        第二个router
    </div>
</template>

var routes = [
    {
        path:"/one",

        component:{template:"#a"}
    },
    {
        path:"/two",
        component:{template:"#b"}
    },
];
// 定义路由组件
var router = new VueRouter({
    routes
});
// 定义路由
new Vue({
    el:"#box",
    router
});
// 创建和挂载实例

<div id="box"> 
    <router-link to="/one">One</router-link>
    <router-link to="/two">Two</router-link>
    <router-view></router-view>
</div>

< router-link > 默认会被渲染成一个 <a> 标签 to=""为我们定义的路由
< router-view > 路由匹配到的组件将渲染在这里

在new Router中指定mode为history即可去掉#，这样加载更加逼真符合预期

new Router({
    mode: "history",
    routes: []
})

//router-link跳转标签 当a标签使用，to必须是一个绝对地址
<router-link to="/goods/title"></router-link>

//或者
this.$router.push({path:""})

// 组件的渲染 配合router—link使用
<router-view></router-view>

2.2 动态路由匹配

通过变化的地址去加载信息

模式	匹配路径	`$route.params`
`/user/:username`	`/user/poetries`	`{username:"poetries"}`
`/user/:username/post/:post_id`	`/user/poetries/post/123`	`{username:"evan",post_id:123}`

应用场景
- 商城的详情页，要变换商品的id，根据商品的id去查对应商品的信息

2.3 嵌套路由

什么是嵌套路由
- 路由嵌套路由

new Router({
    mode: "history",
    routes: [
        {
            path:"/goods", 
            name: "GoodsList",
            component:GoodsList,
            children: [ // 定义子组件
               {
                   path:"title",//最后形式/goods/title
                   name:"title",
                   component:Title
               }
            ]
        }
    ]
})

2.4 编程式路由

通过js来实现页面的跳转

通过push名字就可以实现页面的跳转

// 方式一
this.$router.push("name") //name /cart

// 方式二 
this.$router.push({path:"name"})

// 方式三 传递参数
this.$router.push({path:"name?a=123"})

// 或者
this.$router.push({path:"name",query:{a:123}})

// 方式四 
this.$router.go(1) //$router其实就是对history的封装

如何拿到传递过来的参数

1	this.$router.push("/cart?goodsId=123")

1
2
3

<!--如何在页面上拿到goodsId-->

<span>{{$.route.query.goodsId}}</span>

$route.params是组件跟组件之间路由切换的时候，参数传递

2.5 命名路由

有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称

给路由定义不同的名字，根据名字进行匹配
给不同的router-view定义名字，通过名字进行对应组件渲染

new Router({
    mode: "history",
    routes: [
        {
            path:"/cart/:cartId", 
            name: "cart",
            component:GoodsList,
        }
    ]
})

之前的跳转方式

1	<router-link to="/cart"></router-link>

根据路由名字跳转。以下是一个命名的路由，而且还带了参数

1 2	<router-link v-bind:to="{{name:'cart',params:{cartId:123}}}"></router-link> <!--params是路由的参数，并不是页面之间跳转的参数-->

2.6 命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 ·sidebar·（侧导航）和main（主内容）两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

实现一个命名的视图（很少用到）
- 给router-view加name值

<router-view></router-view>

<router-view name="title"></router-view>

<router-view name="image"></router-view>

页面一进来就加载三个router-view。实现方法

new Router({
    mode: "history",
    routes: [
        {
            path:"/", 
            name: "cart",
            // 根据不同的name值去加载对应的router-view,映射到对应的组件
            components:{
                default:GoodsList,
                title:Title,
                img:Image
            },
            path:"/cart/:cartId", 
            name: "cart",
            component:Cart
        }
    ]
})

1 2	<router-view></router-view> <router-view></router-view>

当我们的视图如上时,我们会发现每一个路由被渲染了两次,所以我们需要为视图命名

<router-view name="a"></router-view>
<router-view name="b"></router-view>
```    

```javascript
var Foo = { template: '<div>foo</div>' }
var Bar = { template: '<div>bar</div>' }
var routes = [
        {
            path:"/one",
            name:"one",
            components:{
                a:Foo,
                b:Bar
            }
        },
    ]

2.7 重定向和别名

重定向

重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置,用于网站调整或网页被移到一个新地址,它也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b

var router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

别名

/a 的别名是 /b，意味着，当用户访问/b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问/a 一样。简单的说就是给 /a 起了一个外号叫做 /b ,但是本质上还是 /a

var router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

barnett_y

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue路由

一、路由基础介绍转载http://blog.poetries.top/archives/1.1 什么是前端路由路由是根据不同的url地址展示不同的内容或页面前端路由就是把不同的路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的1.2 什么时候使用前端路由在单页面应用，大部分结构不变，只改变内容的使用1.3 前端路由优点、缺点...
复制链接

扫一扫

专栏目录