Vue_路由

目录

路由

1.基本使用

1.安装vue-router

2.应用插件

3.编写router配置项

4.实现切换（active-class可配置高亮样式）

 5.指定展示位置

注意

多级（嵌套）路由

1.配置路由规则

2.跳转（要写完整路径）

路由传参

1.query参数

1.传递参数

2.接收参数

2.路由的params参数

1.配置路由，声明接收params参数

 2.传递参数

 路由的props配置

   <router-link> 的replace属性

编程式路由导航

---

路由

理解：一个路由（router）就是一组映射关系（key-value），多个路由需要路由器进行管理。

前端路由：key是路径，value是组件。

1.基本使用

1.安装vue-router

命令 npm i vue-router

2.应用插件

Vue.use(VueRouter)

3.编写router配置项

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../pages/About'
import Home from '../pages/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routers:[
    {
       path:'/about',
       component:About
    },
    {
       path:'/home',
       component:Home
    }
  ]
})

//暴露router
export default router

4.实现切换（active-class可配置高亮样式）

<router-link active-class='active' to='/about'>About</router-link>

 5.指定展示位置

<router-view></router-view>

注意

1.组件有一般组件和路由组件，一般组件放在component文件夹中，路由组件放在pages文件夹中。

 2.通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。

3.每个组件都有自己的 $route 属性，里面存储着自己的路由信息。

4.整个应用只有一个router，可以通过组件的$router属性获取到。

多级（嵌套）路由

1.配置路由规则

使用 children配置项

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routers:[
    {
       path:'/about',
       component:About
    },
    {
       path:'/home',
       component:Home，
       children:[ //通过childern配置子级路由
         {
             path:'news'，//此处一定不要写：/news
             component:News
         },
         {
             path:'message', //此处一定不要写：/message
             component:Message
         }
       ]
    }
  ]
})

2.跳转（要写完整路径）

<router-link to='/home/news'>News</router-link>

路由传参

1.query参数

1.传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
  
<!-- 跳转并且携带query参数，to的对象写法   -->
<router-link
    :to="{
           path:'/home/message/detail',
           query:{
             id:666,
             title:'你好'
           }
    }">跳转</router-link>

2.接收参数

$router.query.id

$router.query.title

2.路由的params参数

1.配置路由，声明接收params参数

{
    path:'/home',
    component:Home,
    children:[
        {
            path:'news',
            component:News
        },
        {
            component:Message,
            children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title', //使用占位符声明接收params参数
                    component:Detail
                }
            ]
        }
    ]
}

 2.传递参数

        <!-- 跳转并携带params参数，to的字符串写法 -->
        <router-link :to="/home/message/detail/666/你好">跳转</router-link>
        <!-- 跳转并携带params参数，to的对象写法 -->
        <router-link
          :to="{
        name:'xiangqing',
        params:{
        id=666,
        title:'你好'
        }
        }"
          >跳转</router-link>

 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3.接收参数

$route.params.id

$route.params.title

 路由的props配置

作用：让路由组件更方便的收到参数

 <router-link> 的replace属性

1.作用：控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史记录有两种写入方式，分别为 push 和 replace ，push 是追加历史记录， replace 是替换当前记录。路由跳转时候默认为 push .

3.如何开启 replace 模式

<router-link replace ......>News</router-link>

编程式路由导航

1.作用：不借助<router-link>实现路由跳转，让路由跳转更灵活。

2.具体编码