vue内容补充
图片绑定的src属性
Vue传输的图片相对路径直接绑定到img的src的属性上图片不会显示,这里有两种解决方式
一 将图片放在static文件夹下,利用相对路径导入就可以
img:[{src:"../static/mao.jpg"},{src:"../static/mei.jpg"}],
二是使用require来导入
{img:require("./assets/logo.png")} # 将这个对象绑定到src上图片就可以显示了
动态路由以及路由之间传递参数
动态路由的设置
{ path: '/detail/:id', name: 'detail', component: Detail, }
生成路由
<router-link :to="{name:'detail',params:{id:item.id}}">点击传送</router-link> # name根据名字指定路由,params向该路由传递参数
获取此id值
# 在该组件中使用 this.$route.params就获取了当前组件的params, this.$route.params.id就获取了id
-- 如果生成路由传递的参数路由设置没有捕获,不会显示在URL上,也就获取不到该值
为路由加参数
<router-link :to="{path:'/login',query:{v1:"v2"}}">我的后面有?v1=v2</router-link> # query参数设置url后的键值
跳转出现的问题
跳转如果只在url上修改了动态的参数,只有url会变,而界面内容不会变换,我们需要自定义事件来请求数据,然鹅自定义事件只会修改内容部分,而url不会变,
这是可以使用push来重定向,因为重定向只修改了动态参数,所以只会修改url,不会使内容变化
# push的用法,指定名字参数 this.$router.push({name:'detail',params:{cid:cid}})
vue-cookies的使用
vue-cookies是个组件,要想使用要先安装他,然后导入他
设置cookie
Cookie.set("键", 值, "20min时长")
获取cookie
Cookie.get('键')
删除cookie
Cookie.remove('键')
router拦截器
# 需要导入router和store,store是因为这里的逻辑需要判断其中的数据 router.beforeEach(function (to,from,next) { // to到哪里去的路由对象 // from从哪里来的路由对象 // next实际要去的地方,可以通过修改他来改变跳转的地方 // 拦截器是全局的,如果想让一些路径可以直接访问,就需要做判断 // 如果路由过多写着也是很麻烦 // 路由对象提供了一个meta属性,默认是个空对象,我们可以往里写入有用的参数 // 比如是否要进行拦截 // 实例路由对象 //{ // path: '/detail/:cid', // name: 'detail', // component: Detail, // meta:{ // requireAuth:true, // } // }, if(to.meta.requireAuth){ // 需要登录的路由 if (store.state.token) { // 已经登录 next() } else { // 未登录,如果想要携带要去的url可以使用to.fullpath,传给query next({name: 'login'})} }else{ // 不需要登录的路由 next() } } )
在页面中跳转到登录页携带当前页的url
<router-link :to="{name:'login',query:{backUrl: this.$route.path}}">登录</router-link> // this.$route.path就是当前的url
取出url中的数据.跳转
this.$route.query // 这是url后的数据 this.$route.query.backUrl // 从里面取值 利用push({path:this.$route.query.backUrl })来跳转, 当然需要先判断一下this.$route.query.backUrl是否为空
二级路由
// 二级路由的定义方式 { path: '/help', name: 'help', component: Help, children: [ { path: 'about-us', name: 'about-us', component: AboutUs }, { path: 'user-note', name: 'user-note', component: UserNote }, { path: 'feedback', name: 'feedback', component: Feedback } ] } // Help组件中需要设置路由出口,用来摆放他下面的组件 // 下面的组件名字前不要写/ // 访问时/help/about_us这样