vue路由传值和路由跳转

最新推荐文章于 2022-09-21 20:31:19 发布

web小谢

最新推荐文章于 2022-09-21 20:31:19 发布

阅读量692

点赞数

分类专栏： vue 前端文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_51050856/article/details/116764921

版权

文章目录

前言
一、vue路由配置步骤
- 1. 路由跳转时共有以下四种传值方式:
总结
- - - - 路由有以下两种跳转方式:
        
        路由跳转时共有以下四种传值方式:

前言

一、vue路由配置步骤

1.第一步: 导入vue.js和vue-router.js插件

 <script src='vue.js'></script>
<script src="vue-router.js"></script>

第二步: 设置路由跳转的标签

<nav style="text-align: center">
            <a href="#/login">登录</a> |
            <a href="#/register">注册</a> |
            <a href="#/main">主页</a> |
            <a href="#/">其他</a> |
            <a href="#/one/two1">二级路由</a>
            <a href="#/one/two2">二级路由</a>
        </nav>

第三步: 创建路由管理的组件

<script>
 	let mycom1 = Vue.component("loginCom", {
    template: "<h1>这是登录页信息 <router-view></router-view></h1>"})
    let mycom2 = Vue.component("registCom", {
    template: "<h1>这是注册页信息</h1>"})
    let mycom3 = Vue.component("mainCom", {
    template: "<h1>这是主页信息</h1>"})
</script>

第四步: 创建路由对象,配置路由信息

  const router = new VueRouter({
   
            routes: [{
    path: "/login", component: mycom1 },
                	{
    path: "/register", component: mycom2 },
                	{
    path: "/main", component: mycom3 },
                	{
    path: "/" , redirect: "/main"},
					{
    path: "/one", component: mycom1,  children: [
                    {
   path: 'two1', component: mycom2},
                    {
   path: 'two2', component: mycom3},
                ]}
            ]
        })

第五步: 把路由对象绑定到vue根组件上

 var vm = new Vue({
   
            el: '#myApp',
            router
        })

第六步: 设置路由出口, 路由控制的组件渲染的位置

<router-view></router-view>

1. 路由跳转时共有以下四种传值方式:

url路径拼接传值, 把数据以键值对形式拼接到url上, 使用$route.query接收
动态路由传值, 使用友好型url设置数据结构传值, 使用 $route.params接收
路由对象传值, 使用对象跳转路由,对象中query字段传值, 使用$route.query接收
命名路由传值, 使用路由名跳转并使用params字段传值, 使用$route.params接收

1. url路径拼接拼接

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="

最低0.47元/天解锁文章

web小谢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue路由传值和路由跳转

文章目录前言一、vue路由配置步骤1. 路由跳转时共有以下四种传值方式:1. url路径拼接拼接2. 动态路由传值3. 路由query对象传值4. 命名路由传值总结路由有以下两种跳转方式:路由跳转时共有以下四种传值方式:前言一、vue路由配置步骤1.第一步: 导入vue.js和vue-router.js插件 <script src='vue.js'></script><script src="vue-router.js"></script>.
复制链接

扫一扫