当前位置：首页 > news >正文

Route路由 Vue2

news 2025/12/3 9:23:29

1.路由的概念

2.路由的基本使用

1.安装

因为我们使用的是Vue2 所以使用的 router 是 3版本当使用Vue3 的时候就使用 router4

npm i vue-router@3

2.简单使用

/router/index.js

//该文件专门创建整个应用的路由器import VueRouter from 'vue-router';
//引入组件
import MyAbout from '../component/MyAbout.vue'
import MyHome from '../component/MyHome.vue'
/*** 创建一个路由器*/
const router = new VueRouter({routes: [{path: '/about',// component: MyAboutcomponent: () => import('../component/MyAbout.vue')},{//导入的两种方式path: '/home',// component: () => import('../component/MyHome.vue')component: MyHome}]
})export default router;

app.vue

<template><div class="appContainer"><div class="row"><div class="col-3"><div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"><!-- 原始写法 --><!-- <button @click="choose=0" class="nav-link " :class="buttonChoose[0]" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">About</button><button @click="choose=1" class="nav-link " :class="buttonChoose[1]" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Home</button> --><router-link  class="nav-link" active-class="active"  to="/about" >About</router-link><router-link class="nav-link " active-class="active" to="/home"  >Home</router-link></div></div><div class="col-9"><div class="panel" ><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div>
</div></div>
</template><script>export default {name: "App",data() {return {choose:0,buttonChoose:[{active:true,},{active:false,}]}}, watch:{choose(newValue){for(let i =0;i<this.buttonChoose.length;i++){if(i===newValue){this.buttonChoose[i].active = true;}else{this.buttonChoose[i].active = false;}}}},components: {},methods: {},};
</script><style scoped></style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false//引入 router 
import VueRouter from 'vue-router';
//引入路由器
import router from './router';Vue.use(VueRouter);//创建vm
new Vue({el: '#app',render: (h) => h(App),//放入构造出 App组件模板router
})