Vue发送请求及使用路由

搭建脚手架后边看源码边学习别人的写法….学了挺多的

Vue-Router

首先，在vue-cli3 中，需要自己去创建一些文件，例如router目录下的index.js，
里面需要先引入vue和vue-router模块，还有需要的组件，这里组件是相对定位，且要加上后缀。
引用后还需要use一下router，再将router实例抛出

在app.vue中记得使用 渲染路由组件

动态路由参数

xxxx.html/user/1  params	动态路由参数
oooo.html/user?userid=1   	query

动态路由参数以冒号开头

Path:'/user/:id', name:'userP',component:'userParams'
Path:'/user',name:'userQ',component:'userquery'

例如在template中

<router-link :to="{name:'userP',params:{id:1}}">用户1</router-link>
里面的id对应的是动态路由参数里的那个id
<router-link :to="{name:'userQ',query:{userid:1}}">用户2</router-link>

嵌套路由

routes:[{
	path:'/home',
	name:'home',
	component:home,
	children:[
{
	Path:'song',
	Component:song
},
{
	Path:'movie',
	Component:movie
}
]	
}]

一个路由对象下若有多个路由，那么就涉及到复用了，这时候要利用动态路由匹配，对子路由进行传参等操作， 可以使用watch对路由的变化进行。

Watch:{
	‘$route’(to,from){
	This.msg = to.params.id;
}
}

在路由跳转前， 可以使用

router.beforeEach(to,from,next)=>{
	…
	If(to.meta.auth){}   	//表示用户点击了博客链接
	Next();    				//不调用next就会卡住
}

beforeRouteEnter  	在渲染该组件的对应路由被confirm前调用，不能获取组件this，因为当守卫执行前，组件实例还没被创建
beforeRouteUpdate  	在当前路由改变，但是该组件被复用时调用
beforeRouteLeave   	导航离开该组件的对应路由时调用  可以访问组件实例this

在方法里可以使用this.$router.push(‘/login’) 来跳转页面
在next() 里也可以写跳转 next({ path:’/login’ })

用keep-alive把 router-view 包裹起来 可以缓存组件

未完待续…

赏

谢谢你请我吃糖果

支付宝

微信