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
-
在router文件夹下建立index.js路由
-
引入vue-router模块 import router from 'vue-router'
-
实例化其对象,并配置其路由规则routes,并暴露此实例对象
-
入口文件中引入路由对象,并且配置到vm实例上
-
代码
// 配置导航的地方
<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>
// 可以在多个页面下 都可以配置路由;用不同的路由规则就行
几个注意点
-
路由组件和一般组件的区别。路由组件相当于一个新的页面,新的整体部分,需要在router/index.js下配置路由的组件。而一般组件,是用来复用的,比如头部,尾部,侧边栏等等,不需要在路由文件中配置,只需要在使用的时候import 组件,然后在component:{xxx} 这里注册一下。
-
路由组件放在views 或者 pages文件夹下,一般组件放在components文件夹下。
-
切走了的路由组件是被销毁了的。可以查看生命周期函数。
-
(组件的实例对象是VueComponent) 每个组件都有自己的$route属性;里面存储着自己的路由信息
-
整个应用只有一个router,每个组件都会有$router属性,里面就是全局所有路由信息
嵌套(多级)路由
就是比如说 在某个(news)页面下,除了最外面的导航条,里面还有导航的情况。一级路由、二级路由
- 配置路由规则,在这个页面下新建一个children
children:[
{
path:today,
components:Today, // 上面要引入这个组件.. import Today from './today'
},
{
...
}
]
- 在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,标题)可以通过参数传过来,从而展示不同的内容。