文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue路由怎么创建

2024-04-02 19:55

关注

这篇“vue路由怎么创建”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue路由怎么创建”文章吧。

一、概念

路由用于设定访问路径,并将路径和组件映射起来

一般用Vue做的都是单页应用,只有一个主页面index.html,所以你写的<a></a>标签是不起作用的,要使用vue-router来进行管理。

二、使用步骤

第一步:安装 

npm install vue-router

第二步:在src文件目录下新建一个router文件夹,src/router/index.js,此处就是编写路由组件的地方,这个文件就是路由的核心文件

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router"

//引入组件

import About from '../pages/About'

import Home from '../pages/Home'

//创建并暴露一个路由器

const router = new VueRouter({

    routes: [

        {

            path: '/about',

            component:About

        },

        {

            path: '/home',

            component:Home

        }

    ]

})

export default router

第三步:在入口函数里引入相关路由

import Vue from "vue";

import App from './App.vue'

//引入VueRouter

import VueRouter from 'vue-router'

//引入路由器

import router from './router/index'

Vue.config.productionTip = false

//应用插件

Vue.use(VueRouter)

//创建vue

new Vue({

    el: '#app',

    render: h => h(App),

    router:router

})

第四步:新建两个路由组件 ,一般存放在pages文件夹里面

第五部:配置App组件

vue中借助router-link标签实现路由的切换    

<router-link class="list-group-item" active-class="active" to="/about">About</router-link> 

active-class:表示当前活跃的路由高亮显示

<router-view></router-view>:指定组件的内容呈现位置 

<template>

  <div>

    <div class="row"> 

      <div class="col-xs-2 col-xs-offset-2">

        <div class="list-group">

          <!-- 原始html中我们使用a标签实现页面的跳转 -->

          <!-- <a class="list-group-item active" href="./about.html">About</a> -->

          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

          <!-- Vue中借助router-link标签实现路由的切换 -->

          <router-link class="list-group-item" active-class="active" to="/about"

            >About</router-link

          >

          <router-link class="list-group-item" active-class="active" to="/home"

            >Home</router-link

          >

        </div>

      </div>

      <div class="col-xs-6">

        <div class="panel">

          <div class="panel-body">

            <!-- 指定组件的呈现位置 -->

            <router-view></router-view>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: "App",

};

</script>

注意点:

路由组件通常存放在pages文件夹里面 ,一般组件通常存放在components文件夹

通过切换,&lsquo;隐藏了的路由组件&rsquo;,默认是被销毁掉的,需要的时候再去挂载

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

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

三、路由嵌套 

跳转要加上父亲路径 即:/home/news

路径:children:[

       {    path:'news'   ,component:News

]

注意path后面不要加 &lsquo;/news&rsquo;

比如我们要在上面基础步骤里面的home路由组件里面嵌套两个组件 

index.js文件:

const router = new VueRouter({

    routes: [

        {

            path: '/about',

            component: About

        },

        {

            path: '/home',

            component: Home,

            children: [

                {

                    path: 'news',

                    component:News,

                },

                {

                    path: 'message',

                    component:Message,

                }

            ]

        }

    ]

那么home组件的展示区就是嵌套组件的呈现位置

home.vue

<template>

  <div>

    <h3>Home组件内容</h3>

    <div>

      <ul class="nav nav-tabs">

        <li>

          <router-link class="list-group-item " active-class="active" to="/home/news">News</router-link>

        </li>

        <li>

          <router-link class="list-group-item " active-class="active" to="/home/message">Message</router-link>

        </li>

      </ul>

      <!-- 指定组件的呈现位置 -->

      <router-view></router-view>

    </div>

  </div>

</template>

<script>

export default {

  name: "Home",

};

</script>

四、路由命名

作用:可以简化路由的跳转

如何使用:

首先给路由命名

const router = new VueRouter({

   routes:[

      {

         name:'guanyu',

         path:'/about',

         component:About

      }

]

})

简化跳转

首先看下没加命名的跳转:

<router-link to ='/demo/test/about'> 跳转 </router-link>

简化后的,直接通过名字跳转

<router-link to='{name:about}'> 跳转 </router-link>

简化写法搭配传递参数

<router-link :to'{name:'about',query:{ id:m.id,title:m.title}}'>{{m.title}}</router-link>

五、query参数 和 params参数

5.1、路由的query参数

传递参数的方法:

方法一:跳转路由并携带query参数,to的字符串写法

<router-link :to="&mdash;&mdash;/home/message/detail? id=${m.id}&title=${m.title}&mdash;&mdash;">{{m.title}}</router-link>

方法二:跳转路由并携带query参数,to的对象写法

<router-link 

   :to="{

        path:'/home/message/detail',

        query:{

            id:m.id,

            title:m.title  

   }">

 {{m.title}}

</router-link>

接受参数的方法:

detail.vue

$route.query.xx

<template>

  <div>

    <ul>

      <li>消息编码:{{$route.query.id}}</li>

      <li>消息编码:{{$route.query.title}}</li>

    </ul>

  </div>

</template>

5.2、路由的params参数 

配置路由:

children: [

         {

              name:'xiangqing',

              path: 'detail/:id/:title', //使用占位符声明接受params参数

              component: Detail,

          }

  ]

传递参数的方法:

方法一:跳转路由并携带params参数,to的字符串写法

<router-link :to="&mdash;&mdash;/home/message/detail/${m.id}/${m.title}&mdash;&mdash;">{{m.title}}</router-link>

方法二:跳转路由并携带params参数,to的对象写法

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

 <router-link

          :to="{

            name: 'xiangqing',

            params: {

              id: m.id,

              title: m.title,

            },

          }"

        >

      {{ m.title }}

</router-link>

接受参数的方法:

detail.vue

$route.params.xx 

<template>

  <div>

    <ul>

      <li>消息编码:{{$route.params.id}}</li>

      <li>消息编码:{{$route.params.title}}</li>

    </ul>

  </div>

</template>

六、路由的params配置  

当父组件携带参数给子路由的时候,子路由可以直接使用,通过params配置后更加简单

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

之前的:<li>消息编码:{undefined{$route.params.id}}</li>

现在的:  <li>消息编码:{undefined{id}}</li>

6.1、方法一

    路由配置props 【使用少】

children: [

            {

               name: 'xiangqing',

               path: 'detail/:id/:title', //使用占位符声明接受params参数

               component: Detail,

               props: { a: '001', b: '你好' }

             }

 ]

值为对象,该对象中的所有key-value都会以props的形式传给Detail组件

   路由接受props

路由;

<template>

  <div>

    <h3>{{a}}</h3>

    <h3>{{b}}</h3>

  </div>

</template>

export default {

  name: "Detail",

  props:['a','b'],

  mounted() {

    console.log(this.$route);

  },

};

 6.2、方法二

   路由配置props

props值为布尔值,为true的时候,就会把该路由组件收到的多有params参数,以props的形式传给detail组件

 path: 'detail/:id/:title' :携带的id和title参数都是跳转路径的时候携带的query参数或params参数

 children: [

            {

             name: 'xiangqing',

             path: 'detail/:id/:title', //使用占位符声明接受params参数

             component: Detail,

             props:true

            }

    ]

   路由接受props

<template>

  <div>

    <ul>

      <li>消息编码:{{id}}</li>

      <li>消息编码:{{title}}</li>

    </ul>

  </div>

</template>

 props:['id','title'],

 6.2、方法三

   路由配置props

children: [

      {

        name: 'xiangqing',

        path: 'detail', //使用占位符声明接受params参数

        component: Detail,

         props($route) {

                 return{

                      id: $route.query.id,

                      title:$route.query.title

                 }

          }

       }

]

   路由接受props

<template>

  <div>

    <ul>

      <li>消息编码:{{id}}</li>

      <li>消息编码:{{title}}</li>

    </ul>

  </div>

</template>

props:['id','title'],

七、两个新的生命周期钩子(路由)

作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态

具体名字:activated 路由组件被激活时触发、deactivted 路由组件失活时触发

即使将news里面的内容缓存起来,在news路由组件失活的时候,定时器也会被关闭,缓存和失活不会相互影响

export default {

  name: "News",

  data() {

    return {

      opacity: 1,

    };

  },

  activated() {

    this.timter = setInterval(() => {

      this.opacity -= 0.01;

      if (this.opacity <= 0) this.opacity = 1;

    }, 16);

  },

  deactivated() {

    clearInterval(this.timter);

  },

};

以上就是关于“vue路由怎么创建”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯