Vue router在Visual Studio Code中的安装与使用

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

1.安装Vue router

1.先新建一个vue，把他拉进Visual Studio Code
在Visual Studio Code的终端输入：

npm install vue-router或cnpm install vue-router或yarn add vue-router

在这里我用的cnpm安装的
在这里插入图片描述
安装成功之后在上面的node_modules中找到：vue-router文件

2.使用

1.在项目的src里面新建文件router.js是用来配置路由信息的js
并且在里面添加如下代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.在src中新建views文件夹，在views新建例如：Home文件夹，在文件夹中新建index.vue文件
在里面写代码（这里面的Content是使用了Content组件，如果不用也可以，在里面随便写点东西方面最后检验是否成功使用）

<template>
  <div id="home">
      <Content />
  </div>
</template>
<script>
  import Content from "../../components/Content.vue"
  export default {
    name: "index",
    data(){
        return{
        }
    },
    components:{
        Content,
    },
    methods:{
    }
  }
</script>
<style scoped>
</style>

怕你们不清楚截图组建的内容
在这里插入图片描述
3.在router.js中设置如下两步
1.引入views里面的Home

import Home from './views/Home/'

在这里插入图片描述
2.在里面添加路由，用来显示选定页面内容，以及以后要学习的页面的跳转

添加如下代码：

export default new VueRouter ({
    // 配置路由信息
    routes:[
        {
            path:'/',        //如果只写 / 则说明默认打开一个页面
            redirect:'/home'//默认指向页面
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

在这里插入图片描述

4.在App.vue中的div内引入

<router-view></router-view>

在这里插入图片描述
5.在main.js中 import router from ‘./router’
在new的实例中增加router，具体如下：

6.在页面查看

大功告成！