版本问题

vue2 要下载vuerouter3
vue3 要下载vuerouter4

使用步骤

  1. 安装vue-router,命令npm i vue-router@版本号

  2. main.js导入vue-router模块,并且使用vue-router插件

    ......
    //引入vue-router
    import VueRouter from 'vue-router'
    ......
    //应用插件
    Vue.use(VueRouter)
    
  3. src路径下创建router文件夹,并创建index.js文件,该文件用于配置路由规则

    //该文件用于创建整个文件的路由器
    import VueRouter from "vue-router";
    import AboutVue from "@/components/AboutVue";
    import HomeVue from "@/components/HomeVue";
    
    //创建一个路由器
    const router = new VueRouter({
        routes:[
            {
                path:'/about',/*路径*/
                component:AboutVue /*组件*/
            },
            {
                path:'/home',
                component:HomeVue
            }
        ],
    })
    //导出
    export default router
    
  4. 实现组件切换,在需要路由切换组件编写如下内容(active-class用于动态地为选中标签添加样式)

    <router-link active-class="active" to="/about"&gt;About</router-link&gt;
    <router-link active-class="active" to="/home"&gt;Home</router-link&gt;
    
  5. 指定展示切换组件位置

    <!--指定组件呈现位置--&gt;
    <router-view&gt;</router-view&gt;
    

几个注意点

  1. 路由组件需要时常切换的组件)一般放在pages文件夹,一般组件(比较固定不动的组件)通常放在components文件夹
  2. 切换组件时,不需要的组件会被销毁,等再切换显示时再次挂载,当组件被销毁时,建议绑定资源释放(例如组件中绑定的自定义事件
  3. 每个组件都有自己$route属性里面存储自己的路由信息
  4. 每个组件共享一个$router属性,因为整个应用只有一个router管理路由规则

多级路由(嵌套路由)

  1. 配置(需要注意的是,多级路由下的path路径配置,不需要写斜杠)

     routes:[
            {
                path:'/about',
                component:AboutVue
            },
            {
                path:'/home',
                component:HomeVue,
                children:[
                    {
                        path:'news',/*二级路由不用写斜杠*/
                        component:NewsVue
                    },
                    {
                        path:'message',
                        component:MessageVue
                    }
                ],
            }
        ],
    
  2. 跳转:要写完整路径

    <router-link active-class="active" to="/home/news"&gt;News</router-link&gt;
    <router-link active-class="active" to="/home/message">Message</router-link>
    

路由传递参数query

  1. 父组件A向子组件B传递参数
    父组件A中核心代码
    【注】:`模板字符串`中可以嵌入 ${js代码}
 <ul>
      <li v-for="message in messageList" :key="message.id">
        <!--跳转路由并携带query参数,to的字符串写法-->
  		<router-link :to="`/home/message/detail?id=${message.id}&amp;title=${message.title}`">{{ message.title }}</router-link>&amp;nbsp;&amp;nbsp;
        <!--跳转路由并携带query参数,to的对象写法-->
        <router-link :to="{
          path:'/home/message/detail',
          query:{
            id:message.id,
            title:message.title
          }
        }">
          {{ message.title }}
        </router-link>
      </li>
</ul>

2.子组件B中接收数据
子组件中存在$route对象,该对象可用于路由参数接收

<ul>
    <li>消息编号:{{ $route.query.id }}</li>
    <li>消息标题:{{ $route.query.title }}</li>
</ul>

路由参数传递-params

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

    {
                path:'/home',
                component:HomeVue,
                children:[
                    {
                        path:'news',/*二级路由不用写斜杠*/
                        component:NewsVue
                    },
                    {
                        path:'message',
                        component:MessageVue,
                        children:[
                            {
                                name:'detailName',
                                path:'detail/:id/:title',/*使用占位符声明接收params参数*/
                                component:DetailVue
                            },
                        ]
                    }
                ],
            }
    
  2. 传递参数

    <ul>
          <li v-for="message in messageList" :key="message.id">
            <!--跳转路由并携带params参数,to的字符串写法-->
     		<router-link :to="`/home/message/detail/${message.id}/${message.title}`">{{ message.title }}</router-link>&amp;nbsp;&amp;nbsp;
            <!--
              跳转路由并携带params参数,to的对象写法方法to对象中不能写path属性,必须写name属性
            -->
            <router-link :to="{
              name:'detailName',
              params:{
                id:message.id,
                title:message.title
              }
            }">
              {{ message.title }}
            </router-link>
          </li>
    </ul>
    

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

  3. 接收参数

    <li>消息编号:{{ $route.params.id }}</li>
    <li>消息标题:{{ $route.params.title }}</li>
    

原文地址:https://blog.csdn.net/theLuckyLong/article/details/134705059

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_21788.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注