Vue-Router 基础入门 安装Vue-Router 使用Vue-Router

Vue-Router 介绍

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

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

那什么又是单页面应用(SPA)？

一个项目中只有一个完整的html主页面，其它都是html片断组成的分页面。浏览器一开始会在主页面加载所有必须的文件，即第一次进入页面的时候会请求一个html文件，在页面跳转交互时由路由将分页面载入到主页面，这时路径也相应的发生变化，页面内容也发生变化，但是并没有新的html请求。js感知到url的变化后动态的将当前页面的内容清除然后将下一个页面的内容挂载到当前页面上。这时前端就要判断到底是哪个页面进行显示，哪个页面进行清除。这个过程就是单页面应用。与之相对的是多页面应用(MPA)，即一个项目是由多个完整的html页面组成，不存在在主分页面的说话，每一次页面跳转所有的资源都要重新进行加载，后台服务器都会返回一个新的html文档。就像传统的页面应用，它们是用超链接来实现页面切换和跳转的。

以下需要在Idea中配置一下：

Vue-router安装

npm install vue-router  --save-dev		#表示安装到当前目录

注意：vue-cli 创建一个项目在当前项目下 安装vue-router

Src目录下 新建一个router （路由）目录，目录下新建 index.js

1.引入模块

 import VueRouter from 'vue-router'

2.作为vue的插件,安装插件

  Vue.use(VueRouter)

4.components组件中创建组件

<!--模板-->
<template>
    <h1>内容页</h1>
</template>

<!--js-->
<script>
    export default {
        name: "Content"
    }
</script>

<!--css 样式修饰-->
<style scoped>
</style>

3.创建导出路由实例对象

//引入组件
import Content from "../components/Content";

//创建路由对象并配置路由规则
export default new VueRouter({		#实例对象名字要与引入模块所写名一致
  routes:[
    {
    //路由路径		这里组件是我自己创建的组件
    path:'/content',
    //路由名字
    name:'Content',
    //要跳转的组件
    component:Content
    },
  ]
})

4.在main.js里面引入的：import router from ‘./router’，得到一个路由实例

//自动扫描配置中的路由
import router from './router'

5.让vue知道我们的路由规则

new Vue({
	//配置路由
    router
})

6.然后在App.vue里面，

<router-link to="/content">内容页</router-link>

7.写入<router-view></router-view>，展示对应渲染的组件

<router-view></router-view>

8.最后就可以启动vue项目,访问web http://localhost:8080/

npm run dev

实例部分：
在components创建两个组件：

Content.vue

<template>
    <h1>内容页</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>
<!---->
<style scoped>

</style>

Main.vue

<template>
  <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

Src目录下 新建一个router （路由）目录，目录下新建 index.js配置完成的路由信息

/*主配置*/
import Vue from 'vue'
import VueRouter from 'vue-router'

//引入组件
import Content from "../components/Content";
import Main from "../components/Main";

//安装路由
Vue.use(VueRouter)


//配置导出路由
export default new VueRouter({
  routes:[
    {
    //路由路径
    path:'/content',
    //路由名字
    name:'Content',
    //要跳转的组件
    component:Content
    },
    {
      //路由路径
      path:'/main',
      //路由名字
      name:'Main',
      //要跳转的组件
      component:Main
    }

  ]
})

main.js：应用的入口文件【js文件入口】

/*入口*/
import Vue from 'vue'
import App from './App'
//自动扫描配置中的路由
import router from './router'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

App.vue：根组件，整个组件的入口【组件文件入口】

<template>
  <div id="app">
    <div><h1>我是泛滥</h1></div>
    <!--路由控制-->
    <!-- router-link 定义点击后导航到哪个路径下  相当于<a>标签-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

接下来就可以访问web端查看自己写的vue