vue复习4

前端渲染和后端渲染

后端渲染 ，也叫服务器渲染，通过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 不加 /

路由传递参数