VUE2学习日记 路由

安装路由

路由安装命令：
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>