route 和 router

route是局部路由,一个vue的路由,key-value;router是全局路由。

vue中的vue-router,是vue的一个插件库,他的实例对象router,专门用来实现从SPA应用,需要在main.js引入,实时监听路径变化,把路由与路由规则进行匹配。

route规则: /class 班级组件;

route规则:/subject 学科组件;

route规则需要我们自己配;并且value组件,也需要我们自己写。

规则前面路径就是key,后面组件就是value;

router会根据路径key,去寻找组件value。

单页面应用SPA

  • single page application,单页面应用,只有一个html,组件之间的跳转靠路由。
  • 整个应用只有一个完整的页面
  • 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
  • 数据需要通过ajax请求获取

vue-router

alt

  1. 在router文件夹下建立index.js路由

  2. 引入vue-router模块 import router from 'vue-router'

  3. 实例化其对象,并配置其路由规则routes,并暴露此实例对象

  4. 入口文件中引入路由对象,并且配置到vm实例上

  5. 代码


// 配置导航的地方
 <router-link ..... active-class="active" to="/Home">HOME</router-link>
 <router-link ..... active-class="active" to="/News">NEWS</router-link>
 <router-link ..... active-class="active" to="/Photo">PHOTO</router-link>


// 不同路由对应显示不同的组件 显示的地方
<router-view></router-view>


// 可以在多个页面下 都可以配置路由;用不同的路由规则就行

几个注意点

  1. 路由组件一般组件的区别。路由组件相当于一个新的页面,新的整体部分,需要在router/index.js下配置路由的组件。而一般组件,是用来复用的,比如头部,尾部,侧边栏等等,不需要在路由文件中配置,只需要在使用的时候import 组件,然后在component:{xxx} 这里注册一下。

  2. 路由组件放在views 或者 pages文件夹下,一般组件放在components文件夹下。

  3. 切走了的路由组件是被销毁了的。可以查看生命周期函数。

  4. (组件的实例对象是VueComponent) 每个组件都有自己的$route属性;里面存储着自己的路由信息

  5. 整个应用只有一个router,每个组件都会有$router属性,里面就是全局所有路由信息

嵌套(多级)路由

就是比如说 在某个(news)页面下,除了最外面的导航条,里面还有导航的情况。一级路由、二级路由

alt

  1. 配置路由规则,在这个页面下新建一个children
	children:[
      {
        path:today,
        components:Today, // 上面要引入这个组件.. import Today from './today'
      },
      {
        ...
      }
    ]
  1. 在news.vue组件下这样写;记得to 要写完整的路径

// 配置导航的地方
 <router-link ..... active-class="active" to="/news/today">today</router-link>
 <router-link ..... active-class="active" to="/news/tomorrow">tomorrow</router-link>


// 不同路由对应显示不同的组件 显示的地方
<router-view></router-view>

路由的query参数

路由组件只需一个,但其内容(id,标题)可以通过参数传过来,从而展示不同的内容。