给vue工程配置vue-router路由

一、下载

1. 打开终端（ win+r  > cmd > 回车  ）

2.切换至工程根目录下 （我的工程根目录是  E:\VUElear\vue_2\my-app）

3.输入下载命令下载路由 （i 就是 install ）

npm i vue-router

 二、在工程里配置路由

注：路由组件一般存放在src>pages文件下，若没有pages这个文件目录就自己建

1.src>main.js

 2.在src目录下建router文件夹，并在该文件夹下建index.js文件

注意：pages目录下需要放有about和home组件，这两个组件就是切换时显示的路由组件（也相当于是需要显示的两个网页）

3. 保存好后刷新页面即可看到上面的访问路径有“#”，说明配置路由成功，接下来就是怎么用路由

 三、使用路由

<template>
    <div class="routers">
        <div class="row">
            <div class="col-1">
                <div class="page-h">
                    <h2>路由 demo</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2">
                <div class="list-group">
                    <!-- 原始切换 -->
                    <!-- <a href="#" class="active">About</a>
                    <a href="#" class="active">>Home</a> -->

                    <!-- 路由切换 -->
                             <!-- to的属性值中必须有“/” -->
                    <router-link active-class="active" to="/about">About</router-link>
                    <router-link active-class="active" to="/home">Home</router-link>
                </div>
            </div>
        </div>
        <!-- 组件方式引入
        <home></home>
        <about></about>  -->

        <!-- 路由方式引入 -->
        <!-- 路由——————指定组件呈现的位置（占位） -->
        <router-view></router-view>
        
    </div>
</template>

<script>
// 路由引用的组件，不需要再在父组件中引入，此时home和about是路由组件，而不是普通组件
// import Home from './commen/home'
// import About from './commen/about'
        //路由组件一般放在 src>pages下 
        // 切换路由时，路由组件是在挂载和销毁之间来回走
export default {
    name: 'Routers',
    components: {
        // Home,
        // About,
    },

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="less" scoped>
.routers {
    width: 400px;
    height: 300px;
    // background-color: rgba(0, 0, 0, .15);
    .active {
        display: inline-table;
        width: 40px;
        height: 20px;
        background-color: rgba(20, 107, 189, 0.15);
    }
}

</style>

以上代码分两步骤：

        a.<router-link>标签的配置 （实现切换）

        b.<router-view>标签的配置（指定展示位置）

四、效果图