vue中路由的简单使用

最新推荐文章于 2025-06-13 16:50:23 发布

jasnet_u

最新推荐文章于 2025-06-13 16:50:23 发布

阅读量709

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/jasnet_u/article/details/105498773

vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vue中路由配置的方法，包括如何在router.js中设置路由规则，如何在组件中使用<router-link>和<router-view>进行页面跳转与展示，以及如何在main.js中挂载路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中路由(vue-router)的使用

router.js中配置路由规则，项目中所有的路由规则通常都统一配置到同一个文件中，习惯将这个文件命名为router.js，

router.js内容如下：

import Vue from 'vue'
import Router from 'vue-router'

import Home    from '../components/Home.vue';
import Product from '../components/Product.vue';
import Project from '../components/Project.vue';
import AboutUs from '../components/AboutUs.vue';
import subProd1 from '../components/subProd1.vue';
import subProd2 from '../components/subProd2.vue';


Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/Home',
      component:Home,
    },
    {
      path: '/Product',
      component:Product,
      children:[
        {
          path:'subProd1',
          component:subProd1
        },
        {
          path:'subProd2',  // 简化写法 相当于/menu1/subMenu2
          component:subProd2
        },

      ]
    },
    {
      path: '/Project',
      component:Project,
    },
    {
      path: '/AboutUs',
      component:AboutUs,
    },
    {
      path:'/',
      redirect:'/Home'
    },
  ]
})

main.js ,new Vue中挂载一下router属性

import Vue from 'vue'
import App from './App'
import router from './router/router.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//注意这行代码很重要，挂载路由
  components: { App },
  template: '<App/>'
})

App.vue 组件:

<template>
  <div >
    <ul>
      <li>
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/product">核心产品</router-link>
      </li>
      <li>
        <router-link to="/project">项目案例</router-link>
      </li>
      <li>
        <router-link to="/aboutus">关于我们</router-link>
      </li>
    </ul>
    <div style="float: left;clear: both;margin-top: 10px">
 
      <router-view/>
 
    </div>
 
  </div>
</template>
<style scoped>
  ul li{
    list-style-type: none;
    font-size: 20px;
    float: left;
    margin-left: 20px;
  }
 
  a {
    text-decoration: none;
  }
  a:visited{
    color: #000000;
  }
 
</style>
<script>
  export default {
    name: 'App'
  }
</script>

Aboutus.vue 组件：

<template>
 <div>
  这是关于我们组件
 </div>
</template>

<script>
  export default {
    name: "AboutUs"
  }
</script>

<style scoped>
</style>

Home.vue组件:

<template>
  <div>
  这是首页组件

  </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>
</style>

Product.vue组件：

<template>
<div>
  <p>产品信息</p>
 <ul>
   <li> <router-link to="/product/subprod1">子产品1</router-link></li>
   <li> <router-link to="/product/subprod2">子产品2</router-link></li>
 </ul>
  <div class="content">
    <router-view></router-view>
  </div>
</div>
</template>

<script>
  export default {
    name: "Product"
  }
</script>

<style scoped>
  .content{
    padding: 30px;
  }
</style>

Project.vue组件:

<template>
  <div>
    这是项目案例组件
  </div>
</template>

<script>
  export default {
    name: "Project"
  }
</script>

<style scoped>
</style>

subProd1.vue组件

<template>
<div>
  产品1详情
</div>
</template>
<style scoped>
</style>
<script>
  export default {
    name:'subProd1'
  }
</script>

subProd2.vue组件：

<template>
<div>
  产品2详情
</div>
</template>
<style scoped>
</style>
<script>
  export default {
    name:'subProd2'
  }
</script>

演示效果如下：