Vue路由续

crainyday

前端 / Vue

发布于：2019年8月10日

字数：1.1k字

时长：4分钟

缓存路由组件

路由组件传值

编程式路由组件

路由守卫

1.缓存路由组件对象

要知道一点, 页面中的组件其实都是一些组件对象.

在页面中切换路由时, 会默认先销毁当前的路由组件对象, 在创建要访问的路由组件对象.

而销毁了之前的组件对象的话, 那个组件中的数据(可能是从后台花了很大力气得到的数据)也会销毁, 再切换回这个组件时, 又会重新请求组件中的数据.

如果我们对那些数据的实时性要求不高的话, 我们希望不要放弃之前的数据. 这就用到了------缓存路由组件对象的技术. 那些数据都在路由对象中存着, 只要对象不销毁, 数据就在.

缓存路由组件对象: 我们只需要显示路由组件的地方加个keep-alive标签说明一下就OK.

1
2
3

<keep-alive>
    <router-view></router-view>
</keep-alive>

2.向路由组件传递数据

在vue中路由真实涉及的只有两个标签: router-link 和 router-view.

无可厚非, 我们有两种方法传递数据. 一种通过 router-link 传递, 一种通过 router-view 传递.

①路由路径携带参数

在这里也有两种携带参数的方式: 携带 param 参数和 query 参数.

在页面中切换路由组件时, 都会有一个特殊的对象 $route : 当前路由对象, 它存着一些路由的信息, 包括路由路径携带的参数(param/query).

①定义路由时, 不能把路径写死. 因为路径带有参数, 需要用占位符.

②编写路由连接时, 需要在 to 属性里指定占位符的值.

③在子路由组件中接收参数.

定义路由路径:

path: 'message',
component: Message,
children: [
    {
      //path: '/home/message/detail?id=:id',//路径携带query参数.
      path: '/home/message/detail/:id',//路径携带param参数.带有占位符
      component: Detail
    }
]

编写路由连接:

1 2	<!--<router-link :to="`/home/message/detail?id=${message.id}`">{{message.title}}</router-link>--> <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>

接收路由参数:

<script>
  export default {
    data () {
      return {
        id: ''
      }
    },
    mounted () {
      setTimeout(() => {//模拟异步ajax请求
        this.id = this.$route.params.id//这里接收的是param参数
        //this.id = this.$route.query.id//这样接收的是query参数
      }, 1000)
    },
    watch: {
      //这里需要监视$route对象,因为mounted函数只会调用一次.
      //当前组件不知道$route的值发生了变化.故须监视
      $route: function (value) {
        this.id = value.params.id
      }
    }
  }
</script>

②router-view标签属性携带数据

①在父组件中的router-view标签属性中传递数据

②在子组件中的props中声明接收属性

Parent.vue:

1	<router-view msg="Hello VueRouter!!!"></router-view>

Child.vue:

<script>
  export default {
    props: {
      msg: String
    }
  }
</script>

3.编程式路由导航

路由(跳转页面)有两种基础的实现方式: 路由标签(如: a标签)和 JS编程实现路由.

vue中编程式路由导航用到了另一个对象 $router(路由器), 这是一个功能对象.

this.$router.push(url): 相当于点击了路由链接(可以返回当前路由界面)

this.$router.replace(url): 用新路由替换当前路由(不能再返回到当前路由界面)

this.$router.back(): 返回到上一个记录路由(相当于浏览器的回退按钮)

this.$router.go(1): 请求下一个记录路由(相当于浏览器的前进按钮)