路由开发
命名路由
在路由文件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
登录案例
登录成功,跳转首页
登录失败,返回登录页
如果没有登录禁止访问首页
不登录也可以访问登录页面