vue学习笔记：路由vue-router的使用，路由传递数据

一时失言乱红尘 2024-04-17 23:09 38阅读 0赞

在使用vue-router之前要先引入:

cnpm/npm install vue-router --save

引入之后就可以在组件之间使用路由进行跳转，首先建立两个组件titleHeader和homeHeader，和他们下面的内容路由文件titleContent和homeContent，再然后在main.js中引入vue-router,

import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

# 然后进行配置路由： #

## 第一步：创建组件 ##

import titleHeader from './components/titleHeader'
    import homeHeader from './components/homeHeader'
    import homeContent from './components/homeContent'
    import titleContent from './components/titleContent'

## 第二步：定义路由 ##

const routes = [
      {path:'/titleHeader',component:titleHeader},
      {path:'/homeHeader',component:homeHeader},
      {path:'/homeContent/:aid',component:homeContent},
      {path:'/titleContent',component:titleContent},
      {path:'*',redirect:'/homeHeader'}   //如果没有找到路由，则跳转的默认路由
    ]

## 第三步：实例化VueRouter ##

const router = new VueRouter({
      routes       //等同于routes:routes格式
    })

## 第四步：挂载实例 ##

new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

## 第五步：模板挂载 ##

在app.vue中挂载路由出口，用来显示组件

<router-view></router-view>

结合router-link进行显示，或者跳转到各自的内容组件，

<template>
      <div id="app">
        <div class="top"> 
          <router-link to="/titleHeader">标题头部组件</router-link>
          <router-link to="/homeHeader">首页头部组件</router-link>
        </div>
        <hr>
        <router-view></router-view>  
      </div>
    </template>

以homeHeader为例，代码如下：

<template>
      <div id="homeHeader">
           <ul>
            <li v-for="(item,key) in list">
              <router-link :to="/homeContent/+key">{
       {key}}----{
       {item}}</router-link>  
            </li>
          </ul>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
            msg:'这是一个头部首页组件',
            list:['111','222','333']
    
        }
      },
      methods:{
        
      }
     
    }
    </script>
    
    <style>
    
    </style>

在内容组件homeContent中可以获取homeHeader传递过来的数据，通过$route.params或者是get方法时的$route.query,这使得路由是动态的路由，可以根据在homeHeader中列表点击的索引进行动态传值，路由配置如下：

{path:'/homeHeader',component:homeHeader},
     {path:'/homeContent/:aid',component:homeContent},

如果访问的路由不存在，可已设置一个人默认的路由跳转地址，放置页面出现空的情况：

{path:'*',redirect:'/homeHeader'}

以上就是vue-router基本用法，有什么疑问或者是我说的不对的地方欢迎评论一起探讨。