Vue路由开发(命名路由、路由传参、命名视图、路由原信息、路由模式、路由滚动),登陆案例(附代码图)

路由开发

vue-router 官网导航守卫 | Vue Routericon-default.png?t=L9C2https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

命名路由

在路由文件index.js当中,对路由设置name属性

!在调用的时候通过对象格式调用

路由传参

动态路由

this.$route.params
​
定义路由的时候
.......
{
    path: "/index/:id"
    .......
}
调用路由的时候
<router-link :to="'/index/'+user.id"
获取参数
this.$route.params.id

get请求,请求携带参数,参数以问号开始,键=值,以&分割,请求参数明文添加在url上,相比较动态路由,get请求传参有一下好处:

1、传参数据多

2、使用方便

get请求可以通过手动评价url实现,所以具有一定的风险

vue可以通过内置的$route.query方法获取get请求参数

命名视图

在之前的内容当中,我们一直采用的是一个路由视图<router-view>

就是在router-view标签上添加name属性,然后再路由上,将component替换为components,然后形成对象格式,进行路由加载组件的映射。

必须要设置一个default命名视图,默认如果路由传递了一个组件,那么就让default执行的router-view进行加载

路由元信息

meta

$route

params

query

路由模式

运行项目

npm run serve

打包命令

npm run build (整理,构建)

就是将项目的html和静态文件抽离整合成前端项目

但是打包有两种模式:

默认hash模式,路由含有#/,需要使用默认服务器打开才可以看到

history: 路由上没有#/,可以直接打开使用

vue.config.js

路由滚动

由于vue是单页面开发,组件跳转采用的是a标签的锚点逻辑,跳转之后,没有刷新页面,导致,在a页面的滚动条状态会保留到跳转到b页面的时候。这种情况下需要手动的调整滚动条位置。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) //让vue使用Router

.......

var r = new Router({
    routes: router,
    linkActiveClass: "active",
    scrollBehavior(to,from,point){
        console.log(arguments,"----------------------------------")
        console.log(to,from,point)
        return {x:0,y:0} //默认滚动到顶部
    }
}) //导出路由对象,对象已经加载规则

.......

export default r

登录案例

登录成功,跳转首页

登录失败,返回登录页

如果没有登录禁止访问首页

不登录也可以访问登录页面

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值