vue2路由的基础知识及使用

一基础路由使用

【1】使用路由前提：

在新建项目时把router选上，项目会自动把路由的基础信息设置好

 

【2】分别建立3个组件（HOME,MOVIE,ABOUT）及设置样式

【3】在APP.VUE里面设置router-link，其中router-view为一个占位符，展示带出来的组件

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/HOME">HOME</router-link> |
      <router-link to="/ABOUT">ABOUT</router-link>|
      <router-link to="/MOVIE">MOVIE</router-link>|
    </div>
    <router-view />
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

【4】在router/index.js里面导入组件及设置hash地址和组件的对应关系

 其中redirect代表的是重定向，表示初始进入界面，显示的组件

二设置嵌套子路由

1.先设置2个about的子组件TAB11和TAB2

2.在ABOUT组件里面设置router-link和router-view

3.在index.js里面导入子组件还有设置children即可

 

4.设置默认子路由，可以将默认子路由的path设置为空字符串，但同时父组件的路径也要进行修改

 除此外还可以用redirect重定向设置默认子路由

 

 三动态路由

1.动态路由是指将Hash地址中可变的部分定义为参数项，从而提高路由的复用性，用英文的冒号:来定义路由的参数项

2.this.$route是路由的参数对象

3.为组件开启props传参

在index.js里面给对应的路由添加props:true,在movie组件里面传递id,

 

 

<!-- 注意1：在 hash 地址中， / 后面的参数项，叫做“路径参数” -->

    <!-- 在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数 -->

    <!-- 注意2：在 hash 地址中，? 后面的参数项，叫做“查询参数” -->

    <!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 -->

<!-- 注意3：在 this.$route 中，path 只是路径部分；fullPath 是完整的地址 -->

    <!-- 例如： -->

    <!-- /movie/2?name=zs&age=20 是 fullPath 的值 -->

    <!-- /movie/2 是 path 的值 -->