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这样