安装路由
路由安装命令:
npm install --save vue-router@3
创建router文件夹
在src下创建router文件夹
创建index.js 文件
在router文件夹下创建index.js 文件夹
.vue文件的创建
在components文件夹下创建.vue文件
实现
在router文件夹下的index.js中
导入Vue
import Vue from "vue";
导入路由
import VueRouter from "vue-router";
使用路由
Vue.use(VueRouter)
导入所有通过路由跳转的组件
import HomeDemo from "@/components/home/HomeDemo.vue";
在VueRouter对象中配置路径
const router = new VueRouter({
routes:[
{path:"/",component:HomeDemo}
]
})
设置导航栏
导航栏:点击对应列表项通过路由跳转
<ul>
<li v-for="(value,index) in navarr" :key="index">
<router-link :to="value.url" exact-active-class="textColor">{{ value.name }}</router-link>
</li>
</ul>
路由的占位
<router-view></router-view>
在data中设置跳转路径
<script>
export default {
name:"NavDemo",
data() {
return {
navarr:[
{name:"首页",url:"/"}
]
}
}
}
</script>