前端渲染和后端渲染
后端渲染 ,也叫服务器渲染,通过url 在服务器就渲染完成。
前端渲染,由js代码在浏览器中执行最终渲染出来的
前端路由和后端路由
后端路由:后端处理url和页面之间的映射关系
单页面复应用
Vue-router的使用
1.安装vue-router
–》 npm install vue-router --save
2.因为vue-router是一个插件,所以使用前必须安装插件
Vue.use(VueRouter)
3.创建路由实例,并且传入路由映射配置
4.在vue实例中挂载
// 配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
// // 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
// // 2.创建VueRouter对象
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component:Home
},
{
path: '/about',
component: About
}
]
const router = new VueRouter({
routes,
mode: 'history'
})
export default router
// // 3.将router对象传入到Vue实例
// export default router
<router-link》 默认渲染成a标签 ,利用tag可以设置为渲染的标签
关于路由映射配置
redirect: 重定向 用于设置默认路径
mode 默认路径方式改为history
active-class: 可以修改默认选中时赋予的class名字
linkActiveClass这样快速修改所有router-link
///基本不改这个玩意
通过代码的方式修改路径
¥router是vue-router自带滴
动态路由
下图为拿到id显示
路由的懒加载
路由被访问时,才加载
推荐这样写,比较方便管理
路由的嵌套
1.创建子部件,然后在父路由中配置相对应的子路由,在父组件中显示需要在父组件中使用router-link 连接路由 和router-view显示子组件
在children里 path 不加 /
路由传递参数