vue中路由router使用1-路由容器router-view-声明式导航router-link-重定向-路由嵌套

在项目目录下, router文件夹下的index.js是编写路由配置的

一级路由

在views文件夹下创建好单文件组件
然后在router文件夹下的index.js中进行配置

• 先导入单文件组件

•   import Film from '../views/Film.vue' // Film.vue是自己创建的
  

• 然后在数组routes中加入路由

• import Film from '../views/Film.vue'
    
  // 路由数组 coutes
  const coutes = [
    {
        
           // 一级路由 
      path: '/film'
      component: Film
    }
  ]
  
  const router = new VueRouter({
        
        
    // routes: routes   // 由于上面的数组名与 routes关键字一样, 就可简写
    routes  // 简写
  })
    
  export default router
  
  

路由容器

现在已经配置好路由了, 然后在APP.vue中加入路由容器(哪一个单文件组件内需要使用其他的组件就需要留好插槽, 不然没有地方显示,不是有点尴尬)
上面的配置好的路由, <router-view>会根据路径来选择显示某个组件

<template>
  <div>
    <!-- 路由容器 router-view  (插槽) -->
    <router-view></router-view>
  </div>
</template>

现在访问 http://localhost:8080/#/film/ 就可以访问到film组件

声明式导航

• 通过页面的点击进行路径的跳转
• 通过<router-link></router-link> 组件就可以实现

<template>
  <div>
         <!-- to 属性为a链接要跳转的链接(就是自己定义的路由),
         tag 属性表示渲染成什么样的标签
         在router-link中指定哪个路由, 那一个标签就是带有class属性,方便加入样式
         active-class属性是给class 属性增加自定义的名字, 不理解试试就知  -->
    <router-link to="/film" tag="li" active-class="Highlight">电影</router-link>
    <!-- 路由容器 router-view  (插槽) -->
    <router-view></router-view>
  </div>
</template>

重定向

• 当访问一个错误的路径时, 跳转到指定的页面
• 在router文件夹下的index.js中进行配置

  // 路由数组 coutes
  const coutes = [
    {
    
       // 一级路由 
      path: '/film'
      component: Film
    },
    {
    
     // 重定向,访问'/'时跳转到'/film'    / 换成* 是当找不到路径就都跳转到/film
      path: '/',
      redirect: '/film'
    },
  ]

路由嵌套

• 这就是一个单文件组件内需要显示另外的组件
• 比如 一个 单文件组件Film.vue内需要进行组件的切换, 这个时候就可使用路由嵌套
• 在Film.vue同级的目录下, 创建一个 films文件夹, 在这个文件夹内编写Film.vue的子组件,目录结构
• 
  然后在router文件夹下的index.js中进行配置 嵌套路由

import Film from '../views/Film.vue' 

import Nowplaying from '../views/films/Nowplaying.vue'
import Comingsoon from '../views/films/Comingsoon.vue'

// 路由数组 coutes
const coutes = [
  {
    
       // 一级路由 
    path: '/film'
    component: Film,
        children: [ // 路由嵌套, 孩子路由
      {
    
    
        path: '/film/nowplaying',
        component: Nowplaying
      },
      {
    
    
        path: '/film/comingsoon',
        component: Comingsoon
      },
      {
    
     // 重定向点击首页进入正在热映
        path: '',
        redirect: '/film/comingsoon'
      }
    ]
  }
]

最后在 Film.vue文件夹内使用声明式导航<router-link>

<template>
  <div>
    <ul>
      <router-link to="/film/comingsoon" tag="li" active-class="Highlight">正在热映</router-link>
      <router-link to="/film/nowplaying" tag="li" active-class="Highlight">即将上映</router-link>
    </ul>
	*************  router-view 路由容器(插槽)别忘啦 ********************
    <router-view></router-view>
  </div>
</template>