Vue-router使用及其嵌套

一、vue-router使用步骤

• 第一步：创建路由组件

  • 新建两个组件
    

• 第二步：配置路由映射：组件和路径映射关系

  index.js
  
  // 配置路由相关信息
  import VueRouter from 'vue-router'
  import Vue from 'vue'
  
  // 引入组件的路径
  import Home from '../components/Home'
  import About from '../components/About'
  
  // 1.通过Vue.use（插件），安装插件
  Vue.use(VueRouter)
  
  // 2.创建VueRouter对象
  const  routes =[
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
  const  router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes
  })
  
  // 3.将router对象传入到Vue实例
  export default router
  
  

• 第三步：使用路由：通过 router-link 和 router-view

  App.vue
  
  <template>
    <div id="app">
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <!-- 渲染组件内容 -->
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App'
  }
  </script>
  
  <style>
  
  </style>
  
  

二、路由的默认路径

需求：有时候进入网页需要直接显示首页，我们需要配置默认路径

• 在index.js中配置

  const  routes =[
    {
      // 重定向到首页，打开网页就是首页
      path: '',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
  

三、标签中的属性

• tag：router-link默认渲染成a标签，tag可以修改成想要的标签，例如button、li等

• replace: 可以直接使用，无需赋值。网页默认采用history.pushState进行前后页面返回，加上replace，则不可以返回

• active-class：指定本标签的class名，用在style中，多个标签class名一样时，来回切换他们，可以实现按钮变色。多个class修改太麻烦，可以在路由配置中添加linkActiveClass

  // 第一种
  <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
      <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
  
  // 第二种class改名
  const  router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    // 将url改成常见的history模式，不用带'#'的哈希
    mode: 'history',
    linkActiveClass: 'active'
  })
  
  

四、动态url

实现目标：

实现方法：

• 1

  // index.js中添加
  {
      path: '/user/:name',
      component: User
  }
  

• 2.在App.vue标签中动态获取

五、获取动态的数据并展示

实现目标：

将当前用户展示出来

实现过程：

• 需要知道，router对象中有一个配置路由和组件之间的应用关系的routes，而 $route可以拿到当前活跃状态的组件数据，如此，我们User页面代码添加如下：

  <template>
      <div>
        <h2>我是用户界面</h2>
        <p>我是用户信息，嘿嘿嘿</p>
        <h2>用户是：{{userId}}</h2>
        <h2>{{$route.params.abc}}</h2>
      </div>
  </template>
  
  <script>
      export default {
          name: "User",
        computed: {
            userId() {
              return this.$route.params.abc
            }
        }
      }
  </script>
  
  <style scoped>
  
  </style>
  
  

• 注意
  
  是index.js中routes数组中的path中的动态id
  

这里不仅可以用计算属性，还可以直接在标签中取到这个数据

六、路由的嵌套使用

• 需求：往往一个页面中需要嵌套其他的组件

• 使用步骤

  1.创建Home的子组件——HomeNews和HomeMessage

2.给定一些标签

// HomeNews.vue

<template>
    <div>
      <ul>
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
        <li>新闻4</li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "HomeNews"
    }
</script>

<style scoped>

</style>

// HomeMessage.vue

<template>
    <div>
      <ul>
        <li>消息1</li>
        <li>消息2</li>
        <li>消息3</li>
        <li>消息4</li>
      </ul>
      <!--快速写法： ul>li{消息$}*4-->

    </div>
</template>

<script>
    export default {
        name: "HomeMessage"
    }
</script>

<style scoped>

</style>

3.在Home模板中进行添加

// Home.vue

<template>
    <div>
      <h2>我是首页</h2>
      <p>我是首页内容哈哈哈</p>

      <router-link to="/home/news">新闻</router-link>
      <router-link to="/home/message">消息</router-link>
      <!-- 添加子组件的router-view-->
      <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

4.进行配置（重点）

// index.js

// 配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 路由懒加载
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')

// 1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const  routes =[
  {
    // 重定向到首页，打开网页就是首页
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    // 添加属于Home 的子组件,子组件路由path前面不需要加 '/ '
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:abc',
    component: User
  }
]
const  router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  // 将url改成常见的history模式，不用带'#'的哈希
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

• 在子组件配置时，需要将它配置在对应的父组件下，采用 [{ },{ },{ }] 形式，子组件的path不需要加斜杠