目 录CONTENT

文章目录

vue-router 路由的使用

俊阳IT知识库
2023-01-12 / 0 评论 / 0 点赞 / 322 阅读 / 1,713 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903902148558855
欢迎访问😃,有任何问题都可留言评论哦~

基本路由

  1. 创建需要的组件
<template>
    <div class="login">
        Login组件
    </div>
</template>
  1. 把组件导入(import)到 router.js 中,然后在 routers 中设置匹配规则
import Login from "./views/Login.vue"

{
  path: "/login",
  name: "login",
  component: Login,
}
  1. 在其他组件中使用 <router-view /> 用来放路由匹配的组件
  2. 使用 <router-link> 通过点击实现匹配路由跳转
<template>
    <div class="setting">
        其他组件<br>
        <router-link to="/setting/login">login页面</router-link>
        <router-view></router-view>
    </div>
</template>

嵌套路由

一般应用界面,通常由多层嵌套的组件组合而成,同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,所以要用到嵌套路由。

1.创建所需要的组件,下面是两个组件

<template>
    <div class="login">
        Login组件
    </div>
</template>

<template>
    <div class="register">
        Register组件
    </div>
</template>

2.把组件导入(import)到 router.js 中,然后在 routers 中设置匹配规则(你需要在哪个路由下用这两个路由页面,就把这两个路由的匹配规则写到那个路由的匹配规则下)例如:我要在setting组件下用这两个组件,如下

{
  path: "/setting",
  name: "setting",
  component: Setting,

  children: [
	{
	  path: "/setting/login",
	  name: "login",
	  component: Login,
	},{
	  path: "/setting/register",
	  name: "register",
	  component: Register,
	}
  ]
}

3.在Setting组件中使用 <router-view /> 用来放路由匹配的组件

4.使用 <router-link> 通过点击实现匹配路由跳转

如下:

<template>
    <div class="setting">
        Setting组件<br>
        <router-link to="/setting/login">登录页面</router-link><br>
        <router-link to="/setting/register">注册页面</router-link><br>
        <router-view></router-view>
    </div>
</template>

注:要使用嵌套路由,一定要在 VueRouter 的参数中使用 children 配置

children 配置就是像 routes 配置一样的路由配置数组,所以呢,可以嵌套多层路由。

动态路由

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 Detail 组件,对于所有 ID 各不相同的内容,都要使用这个组件来渲染。如下:

1.创建所要使用的组件

//	Detail组件  
<template>
    <div class="detail">
        这是详情页面
        <h1>{{this.$route.params.id}}</h1><br>
    </div>
</template>

//	列表界面  
<template>
    <div class="list">
        这是列表页面

        <ul>
            <li><router-link to="/detail/1">1号</router-link></li>
            <li><router-link to="/detail/2">2号</router-link></li>
            <li><router-link to="/detail/3">3号</router-link></li>
        </ul>
    </div>
</template>

2.把组件导入(import)到 router.js 中,然后在 routers 中设置匹配规则。如下:

{
  path: "/list",
  name: "list",
  component: List,
},{
  path: "/detail/:id",
  name: "detail",
  component: Detail,
}

注:动态路径参数 要以冒号(:)开头

3.在List组件中使用 <router-link> 通过点击实现匹配路由跳转

注:一定要带参数 如下:

<template>
    <div class="list">
        这是列表页面

        <ul>
            <li><router-link to="/detail/1">1号</router-link></li>
            <li><router-link to="/detail/2">2号</router-link></li>
            <li><router-link to="/detail/3">3号</router-link></li>
        </ul>
    </div>
</template>

4.在Detail组件中接收传递过来的数据

<template>
    <div class="detail">
        这是详情页面
        <h1>{{this.$route.params.id}}</h1>
    </div>
</template>

注:接收时一定要用this.$route.params.接收,后面加上参数

这样就能接收到传递过来的参数了

编程式路由

除了使用 router-link 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

注:在 Vue 实例内部,可以通过 router访问路由实例。因此可以调用this.router 访问路由实例。因此可以调用 this.router.push 方法直接跳转到指定页面

例如:我想在 Find组件 中跳到 setting组件 ,这时不使用 router-link ,那么我们就可以使用 this.$router.push 方法

由于这几个步骤都大致相同,我就不一一说了,直接说核心代码:

<template>
    <div class="find">
        Find组件

        <button @click="f">去setting页面</button>
    </div>
</template>

<script>
export default {
    methods:{
        f(){
            this.$router.push("/setting")
        }
    }
}
</script>

如上述代码所示,在Find组件中直接设置一个按钮,绑定一个点击事件,然后直接调用push方法,就可以直接跳转到 /setting 页面

router.go(n)

这里再说一个方法 router.go(n)

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步

如下代码:

// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)

// 后退一步记录,等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)

在方法中一般使用 this.$router.go(n)

如下:都表示 返回

f(){
	// this.$router.go(-1)
	this.$router.back()
}

重定向

我们一般在开发时,首页都是用 index 来命名的,所以我们不可能在地址栏上输入 /index 来进入首页。
我们可以直接在默认情况下,进的就是 index 页面
这时就可以用到重定向

重定向也是通过 routes 配置来完成

如下代码:

routes: [
    {
      path: "/",
      redirect:"/home"
    }
]

上述代码说明,如果地址栏中使用 / ,或者 / 可以省略不写,这时就直接跳转到 home 页面。

匹配优先级

有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。


^_<

0

评论区