路由跳转、相关api、路由守卫、路由两种工作模式

【router基本使用（路由跳转,携带数据）】

####### 跳转 #######-js跳转this.$router.push(路径)this.$router.push(对象)-this.$router.push({name:'路由别名'})-this.$router.push({path:'路径'})-组件跳转<router-link to="/about"><router-link :to="{name:'路由别名'}"><router-link :to="{path:'路径'}">##### 路由跳转，携带数据############-请求地址中以  ? 形式携带 ---》 /about?name=数据#####router-link######-router-link 组件携带- to="/about?name=xxx"- :to="{name:'about',query:{name:'xxx',age:18}}"-在另一个页面组件中取：this.$route.query#####js跳转######-js跳转 携带数据-this.$router.push('/about?name=xxx&age=18')-this.$router.push({name: 'about', query: {name: 'xxx', age: 28}})-在另一个页面组件中取：this.$route.query

 

<template>
  <div class="home">
    <h1>Home</h1>
    <!--    <<h></h>outer-link to="/about?name=xxx"><button>跳转到about</button></router-link>-->
    <!--    请求地址中以 ？形式携带-->
    <!--<router-link :to="{name:'about',query:{name:'xxx',age:18}}"><button>跳转到about</button></router-link>-->
    <hr>
    <button @click="handleTo">js跳转到about</button>
  </div>

</template>

<script>

export default {
  name: 'HomeView',
  methods: {
    handleTo() {
      //1.js携带数据
      // this.$router.push('/about?name=xxx&age=18')

      //2.js携带数据
      this.$router.push({name: 'about', query: {name: 'xxx', age: 28}})
    }
  }
}
</script>

aboutView

<template><div class="about"><h1>about页面</h1></div>
</template><script>
export default {name: 'AboutView',data() {return {name: '',}},created() {console.log('$route', this.$route) //$route是当前路由信息对象//取值this.name = this.$route.query.name}
}
</script>

----------------------------------------------------------------------------

     -请求地址中携带 --》/about/数据/-必须在路由中写{path: '/about/:id/detail',name: 'about',component: AboutView},-标签跳转-to="/about/88"-:to="{name:'about',params:{id:66}}"-js跳转this.$router.push('/about/tt')this.$router.push({name: 'about', params: {id: 'xxx'}})-另一组件中取this.$route.params

。

。

。

【相关api】

1 指的是：this.$router--->方法

2 常用的 this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

this.$router.back(): 请求(返回)上一个记录路由

this.$router.go(-1): 请求(返回)上一个记录路由

this.$router.go(1): 请求下一个记录路由

【多级路由】

 

 

<template>
  <div class="home">

  <div class="left">
    <router-link to="/backend/index"><p>首页</p></router-link>
    <router-link to="/backend/order"><p>订单页面</p></router-link>
    <router-link to="/backend/goods"><p>商品页面</p></router-link>

  </div>
  <div class="right">
    <router-view></router-view>
  </div>
  </div>

</template>

<script>

export default {
  name: 'HomeView',
  methods: {

  },

}
</script>

<style scoped>
.home{
  display: flex;
}
.left{
  height: 300px;
  width: 20%;
  background-color: #42b983;
}
.right{
  height: 300px;
  width: 80%;
  background-color: aqua;
}
</style>

 

。

。

【路由守卫】

 

 

 

 。

。

【路由两种工作模式】

# 1 对于一个url来说，什么是hash值？—— # 及其后面的内容就是hash值。

# 2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

# 3 hash模式： 地址中永远带着#号，不美观 。 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。 兼容性较好。

# 4 history模式： 地址干净，美观 。 兼容性和hash模式相比略差。 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题