vue Router

创建步骤

1. 新建一个项目文件夹

2. 打开cmd，输入vue create 项目名，创建一个新的vue router项目

3. 根据提示步骤做出选择

         （1） 选择手动配置 Manually select features

         （2） 选择配置项：

                     1 . choose Vue version   vue版本

                    2 .   Babel   翻译

                    3 .  Router    路由

                    4 .  CSS Pre-processors   预处理器

                    5 .  Linter/Formatter    格式化工具，校验工具

         （3） 选择：3.x    vue3的版本

         （4） 回车

         （5） 第五步是让选择使用什么css预处理器，这里可以选择Less

         （6） 回车

         （7） 这一步是让选择是否开启lint的校验工具，可以取消，什么都不选

         （8） 回车

新增的页面结构

新增了views文件夹，存放页面级组件

新增了router文件夹，存放路由信息

运行

nom run serve

yarn serve

使用

Vue Router 是  Vue.js (http://v3.vuejs.org/  网站) 的官方路由         它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举

<router-link>入口标签</router-link>

<router-view>出口标签</router-view>

使用案例：

在views中新建一个路由页面，写一些内容

         <template>                                                                                                            <div>                                                                                                                    <h1>购物车</h1>                                                                                        </div>                                                                                                </template>

         <script>

                 export default {  }

         </script>

         <style lang="less" scoped>

         </style>

在Home.vue中添加入口

        <template>

                <div class="home">

                        <h1>首页</h1>

                        <nav>

                            <router-link to="/cat">购物车</router-link>

                       </nav>

                </div>

        </template>

        to的添加方式有三种：

                直接写路由配置中的路径

                对象的形式 :to="{name:'Cat'}",值是路由配置中的name值

                获取data中的属性值，:to="catObj"

                        data(){

                            return{

                                    catObj:{name:'Cat'}

                            }

                        }

修改router中的路由信息index.js

路由配置表

         const routes = [

             {                                                                                                                    path:'/cat', // 路径                                                                                                      name:'Cat',   // 路由别名，不是必填                                                                     component:Cat    //要显示的页面组件                                                                    },                                                                                                                           ]