vue Router路由通往快乐的起点

快速理解

vue-router

vue-router是Vue的一个插件库，专门用来实现SPA应用

SPA应用：

1.单页Web应用（single page web application，简称SPA）

2.整个应用只有一个完整的页面

3.点击页面中的导航链接不会刷新页面，只会做页面的局部刷新。、

4.数据需要通过ajax请求获取

路由

1.什么是路由

a.一个路由就是一组映射关系（key value）

b.key为路径，value可能是function或component

2.路由分类

a.后端路由：

1.理解：value是function，用于处理客户端提交的请求。

2.工作过程：服务器接受收到一个请求时，根据请求路径中找到匹配的函数来处理请求，返回响应数据。

b.前端路由：

1.理解：value是component组件，用于展示页面内容。

2.工作过程：当浏览器的路径改变时，对应的组件就会显示

快速入门

简单案例：

新建组件index1.vue和index2.vue 例如：

<template>
    <div>
        <h1>page1</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "hello vue"
            }
        }
    }
</script>

main.js中

import { createApp } from 'vue'
import App from './App.vue'
//引入router路由
import router from './router'

import store from './store'

//注入到vue的实例对象上
createApp(App).use(store).use(router).mount('#app')

修改路由文件router.js

//引入vue-router
import { createRouter, createWebHashHistory } from 'vue-router'

//引用index.vue页面
import index1  from './index1.vue';
//引用page2页面
import index2 from './index2.vue';

//定义routes路由的集合，数组类型
const routes=[
    //单个路由均为对象类型，path代表的是路径，component代表组件
    {path:'/index1',component:index1},
    {path:"/index2",component:index2}
]
//实例化VueRouter并将routes添加进去
const router=createRouter({
history: createWebHashHistory(),
    routes
});

//抛出这个这个实例对象方便外部读取以及访问
export default router

修改App.vue

<template>
  <nav>
//router-link 页面中点击触发部分 在页面中会转换为a标签但不能用a标签
    <router-link to="/index1">index1</router-link> |
    <router-link to="/index2">index2</router-link>
  </nav>
//router-view 页面中显示的部分
  <router-view/>
</template>

注：如果路由集合中有个路由path路径为空"",进入页面是默认该对应页面

动态路由匹配

1.在路由设置中 ：

路由数组routers =[ {path:'/index/:msg',component:index}]

2.在App.vue文件中：

<router-link to="/index/myvue">动态路由我的vue</router-link>

3.在index组件中：

可以通过$route.params.msg来获取路由的参数

<div>{{$route.params.msg}}</div>

嵌套路由

新建组件类似同上 ，去，取名为index3（自定义）。

在路由router配置中

//导入
import index3 from "./index3"
//修改路由数组routers
routers =[
{
 path:"/index1",        //一级路由
 component: index1,
 children:[
        {                //二级路由
          path:"index3",
          component:index3
}]
}]

 修改一级路由index1

<template>
<div>
    <div>
        <h1>page1</h1>
        <p>{{msg}}</p>
    </div>
    <div>
        <router-link to="/index1/index3">index3</router-link>
    </div>
     <router-view />
</div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "hello vue"
            }
        }
    }
</script>

路由导航

标签导航

标签导航：标签导航<router-link><router-link>是通过转义为<a></a>标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；

//跳转到名为index路由，并传递参数msg  对象写法
<router-link :to="{ name: 'index', params: { msg: 123 }}">index</router-link>
//to字符串写法
<router-link :to=":to="/index?msg=123"">index</router-link>

编程式导航

编程式导航：我们可以通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转

导航：

// 字符串路径
router.push('/index/index2')

// 带有路径的对象
router.push({ path: '/index/index2' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'index', params: { msg: 'index2' } })

// 带查询参数，结果是 /index?msg=123
router.push({ path: '/index', query: { msg: '123' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

替换当前位置：

声明式：<router-link :to="..." replace>

编程式：router.replace(...)

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

 历史跳转：

this.$router.forward()  //前进

this.$router.back()  //回退

this.$router.go()  //前进或者后退

命名导航 

name命名可以简化router-link标签中to路径跳转的写法

//修改路由数组routers
routers =[
{
 path:"/index1",      
 name : "index",   //命名           
 component: index1,
}]