Vue学习之旅Part9：使用vue-router实现前端路由和参数传递

一、概念

1、什么是路由

简单来说 路由就是URL到函数的映射
访问的URL会映射到相应的函数里 然后由相应的函数来决定返回给这个URL什么东西
路由进行的是一个匹配的工作

2、后端路由和前端路由

• 1、后端路由：
  对于普通网站 所有超链接都是URL地址 所有的URL地址都对应服务器上对应的资源
  每个前端的资源都对应着一个URL地址 由后端路由进行分发
  浏览器在地址栏中切换不同的url时每次都会向后台服务器发出请求 然后服务器响应请求 在后台拼接html文件传给前端显示 从而返回不同的页面
  这意味着 浏览器会刷新页面 前后端不分离

• 2、前端路由：
  对于单页面应用程序来说 通过URL中的hash(#号)来实现不同页面之间的切换 页面不刷新
  例如：www.xxx.com#/xxx这种格式
  同时 hash有一个特点：HTTP请求中不会包含hash相关的内容
  类似于锚点的概念
  在第一个#后面出现的任何字符都会被浏览器解读为位置标识符 这意味着 这些字符都不会被发送到服务器端
  前端路由只是单单改变#后的内容 浏览器只会前往相应位置 不会重新加载网页 浏览器不会重新向服务器请求页面

在单页面应用程序中 这种通过hash改变来切换页面的方式称作前端路由
(和后端路由形成一个区别 由前端来负责路由的工作)

---

二、基本使用

1、引入

vue-router是Vue.js官方的路由管理器

cdn引入：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

vue-router依赖于Vue 因此引入vue-router的顺序必须在Vue之后

当导入vue-router包之后 会自动使用Hash路由
URL地址后面会自动添加：#/

2、创建路由规则对象 定义路由的匹配规则：

当导入vue-router包之后 在window全局对象中就有了一个路由的构造函数 名为VueRouter

①、用new VueRouter()创建一个路由规则对象 并且在new的时候 为构造函数传递一个配置对象

配置对象里面是路由匹配规则 每个路由匹配规则都是一个对象

在该对象上 有两个必填的属性：
path 即监听的路由连接 还有component 即对应的要显示的组件
例：{path:"/login",component:login}

②、然后 将该路由规则对象注册到Vue实例的router属性中

这样 当匹配到了前面的路由连接之后 即在页面展示出后面对应的组件 从而实现路由

<script>
    // 组件模板对象1
    var login={
    
        template:"<h1>登录</h1>"
    }
    // 组件模板对象2
    var register={
    
        template:"<h1>注册</h1>"
    }

    // 创建路由规则对象
    var routerObj=new VueRouter({
    
        // 定义路由匹配规则
        routes:[
            // component属性的值是模板对象 不是组件引用名称 不加引号
            {
    path:"/login",component:login},
            {
    path:"/register",component:register}
        ]
    })

    var vm=new Vue({
    
       el:'#app',
       data:{
    },
       methods:{
    },
       // 将路由规则