vue-router在组件化编码中，路由的使用步骤

Posted 2022-01-06 peatechen

一、在组件化编码中，路由的使用方法

1. 在路由组件文件夹下定义路由组件

• 和定义普通组件步骤相同

2. 在router.js文件中定义路由匹配规则

• 首先引入第一步中定义好的组件

    import Home from './views/Home.vue'

    // 第二种引入方法，给 path 绑定组件时导入 ，有什么区别待查正，涉及赖加载
    component: () => import(/* webpackChunkName: "search" */ './views/SearchUser.vue')

• 制定路由匹配规则

    export default new Router(
          routes: [
            
                  path: '/',
                  name: 'home',
                  component: Home
            ,
         ],
    )

3. 注册路由

• 在vue实例中注册路由，如果使用vue-cli构建项目，这些工作都已经做好

4. 使用路由

• 定义路由切换的入口

    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link>

• 设置路由切换的容器

   <router-view></router-view>

    <!-- 给容器指定特定显示的组件 -->
    <router-view name="home"></router-view>

二.路由的一些特殊用法

1.路由嵌套

一个使用了路由的组件中如果还要使用路由，那么就需要使用路由嵌套，比如在根路由下有一个子路由 ‘/login’ , 就需要在 / 路由的匹配规则中加入 children 属性数组，其内容就是定义子路由匹配规则的对象。

    children : [
        
            path : 'login'，
            name : '',
            component : '组件‘
        ，
    ]

2.路由重定向

路由重定向也是一条匹配规则，只是需要把 path 对应的 component 换成 redirect : ‘‘ 属性值是目标 path 路径

    routes : [
        
            path : '/',
            redirect : '/home'
        
    ]

3.活动态的路由组件

当前所在的路由组件就是处在活动态，这个状态随路由组件的切换而改变，进入活动态的组件标签有一个 router-link-active 属性，非活动态的组件则没有，可以给这个属性赋一个特殊css样式

4.控制路由组件的回退

在android应用程序的左上角通常会有一个回退箭头，在pc浏览器左上角同样有前进和回退的操作，如果想要把这种回退和前进操作放到应用程序本身里面，而不是用浏览器的回退按钮去操作，特别是在移动端的web应用就有这种需求，就可以使用以下方法：

    // 回退按钮的单机事件绑定函数
    @click = "$router.back()"
    
    // 前进
    this.$router.go(1)

5. 另外一些切换路由的方式

• this.$router.push(‘/home/news‘)
  这种方式相当与使用 "router-link to=‘/home/news‘ " , 可以正常回退到上一个显示的组件。

• this.$router.replace(‘/home/news‘)
  这种方式是把当前所在的组件路由干掉，替换成目标组件的路由，如果回退，不会回到上一次显示的组件