使用Vue中的router路由

关注

翻译最新推荐文章于 2026-03-16 01:15:09 发布 455 阅读 AI 写同款· GEO 优化 ›

Vue--》路由vue-router的使用讲解 npm7 以上的版本，新增了一个对等依赖的特性，在以前的版本上，只会显示警告，但是还是可以安装成功，然而在新的版本是，npm 安装依赖则会直接报错，无法安装，这也是为了应用更加健壮而加的新的特性吧！当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的a链接了，使用router-link后，就不用再书写a链接必须写的 # 了。在上文介绍的hash地址中，/ 后面的参数项，叫做路径参数，需通过 this.$route.params来访问路径参数。在hash地址中，? 阅读详情

要使用Vue路由,首先需要在项目启动前安装router
安装方法 : npm install vue-router --save-dev
安装完毕后,输入npm run dev启动项目

首先配置main.js

import Vue from 'vue'
import App from './App.vue'   //主组件
import HelloWorld from './components/HelloWorld.vue'  //Helloworld组件
import Home from './components/Home.vue'  //Home组件

// (1):使用路由先引入路由地址
import VueRouter from 'vue-router'
Vue.config.productionTip = false; //取消掉生产提示
// (2):使用中间件注明使用路由
Vue.use(VueRouter);
// (3):配置路由
const router = new VueRouter({
    routes:[
        {path:"/",component:Home},                  //   把路由的根路径设置为Home组件地址
        {path:"/HelloWorld",component:HelloWorld}   //   配置HelloWorld路径地址
    ]
});

/* 主JS创建Vue对象 */
new Vue({
//(4):在实例化对象中使用router路由
    router, //实例化路由
    el: '#app',
    components: { App },
    template: '<App/>'
});

再在App.vue中使用<router-view></router-view> 标签引入路由

<template>
  <div>
    <!--使用router-link标签代替a标签去做跳转,最终页面上渲染出来还是一个a标签-->
    <li> <router-link to="/">去往Home</router-link> </li>
    <li> <router-link to="/HelloWorld">去往HelloWorld</router-link> </li>
    <br>
    <!-- 在首页引入路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name:"app",
        data () {
            return {
            }
        }
    }
</script>

在src中的components文件夹下配置HelloWorld文件

<template>
  <div>
    HelloWorld页面
  </div>
</template>
<script>
    export default {
        name:'HelloWorld',
        data () {
            return {
            }
        },
    }
</script>

在src的components文件夹下配置Home文件

<template>
    <div>
        Home页面
    </div>
</template>
<script>
    export default {
        name:"Home",
        data () {
            return {
            }
        }
    }
</script>

main.js中app.vue为项目主组件,在main.js中配置路由的时候,routes的地址 '/' 标签项目进入就直接出现的地址.

收录于