VueRouter学习笔记

VueRouter学习笔记

1.后端渲染

• html+css+java
• java代码从数据库中读取数据，并且将它动态的放在页面中，这已经是在服务器渲染好的网页

2.后端路由

• 服务器处理URL和页面之间的映射关系

3.前端渲染

• 浏览器中显示的网页中的大部分内容，是由前端写的js代码在浏览器中执行，最终渲染的网页

4.前端路由

• 改变URL，但页面不进行整体刷新
• 直接赋值location.hash改变href，页面不会刷新
• HTML5的history模式(5种方法)，页面也不会刷新
  • pushState、replaceState、 back、forward 、go

5.Vue-Router

5.1使用步骤

• 导入路由对象，并且调用Vue.use(VueRouter)

// 配置路由相关信息
import Vue from 'vue' // 导入vue
import Router from 'vue-router' //导入路由

// 1.通过Vue.use(插件),安装插件
Vue.use(Router)

• 创建路由实例，并且传入路由映射配置

// 2.创建路由实例对象
//配置路由映射：组件和路径映射关系
const routes = [
  {
    path: '/',
    redirect: '/home'//重定向，设置首页路径为默认显示
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页',
    },
    children: [//路由嵌套
      {
        //子组件可以这样写 不加 /
        path: 'news',
        component: HomeNews,
      },
      {
        path: 'message',
        component: HomeMessage
      },
      {
        path: '/user/:id', //动态路由
        component: User,
        meta: {
          title: '用户',
    		},
  		},
    ]
  },
]
const router = new Router({
  //配置路由和组件之间的应用关系
  routes,
  mode: 'history', //模式转换为history / ，默认为哈希模式/#
  linkActiveClass: 'active',//谁处于活跃就添加名为active的class
})

// 3.把路由传入Vue实例中
export default router

• 使用路由：通过<router-link>这个相当于<a>标签跳转路径和<router-view>相当于占位

5.2<router-link>其他属性

• tag可以指定渲染成什么标签
• replace后退键不能返回上一个
• active-class路由匹配成功后，自动给当前元素设置class

<router-link to="/home" tag="button" active-class="active">首页</router-link>
<router-link to="/about" replace>关于</router-link>

5.3通过代码跳转路径

homeClick() {
  //通过代码的方式修改路径
  // $router 调用 push => pushState $router是index.js中 new Router
  this.$router.push('/home')
},
userClick() {
	this.$router.push('/user/' + this.userId)
},

6.路由懒加载

• 将路由对应的组件打包成一个个js代码块

• 路由被访问时再加载对应组件

//懒加载
const Home = () => import('../components/Home.vue')

7.传递参数

7.1params(动态路由)

• 配置路由格式：/router/:id
• 传递方式：在path后面跟上对应值
• 传递后形成路径：/router/id(参数不会在URL地址显示)
• 取传递参数的方式：$route.params.id

<!-- 这里用v-bind进行动态绑定 -->
<router-link  :to=" '/user/' + userId">用户</router-link>

data() {
    return {
      userId: 'Kylin'
    }
  },

7.2query

• 配置路由格式：/router
• 传递方式：对象中使用query的key作为传递方式
• 传递后形成路径：/router?id=123&name=Kylin(参数会在URL地址显示)
• 取传递参数的方式：$route.query.name

<!--传参数-->
    <router-link :to="{
      path: '/profile',
      query: {name: 'Kylin', age: 21, height: 1.72}
    }">档案</router-link>

7.3通过代码传参

userClick() {
	this.$router.push('/user/' + this.userId)
},
profileClick() {
  this.$router.push({
    path: '/profile',
    query: {
      name: 'lx',
      age: 18,
      height: 1.72
    }
  })
},

7.4$router和 $route的区别

• $router是VueRouter实例(全局)，想要导航到不同URL，则使用$router.push方法
• $route是当前router跳转对象(当前活跃路由)里可以获取name，path，query，params等

8.导航守卫

• 监听路由的进入和离开

• 全局和局部(路由独享守卫，组件守卫)

• 应用：在一个SPA应用中，改变网页标题

//前置守卫 guard 前置钩子 hook 也是个回调
router.beforeEach((to, from, next) => {

  //从from 跳转到 to
  document.title = to.matched[0].meta.title
  //next 下一步 调用了才能下一步 是一个拦截器
  next()
})

// 后置守卫不需要主动调用next()
router.afterEach((to, from) => {

})

9.keep-alive状态缓存

• 被包在keep-alive中的组件离开前的状态会被保存

• 两个重要属性

  • include：字符串或正则表达式，匹配的组件会被缓存
  • exclude：字符串或正则表达式，匹配的组件不会被缓存

<keep-alive exclude="Profile">
	<router-view></router-view>
</keep-alive>