前端路由VueRouter

最新推荐文章于 2024-09-07 16:07:08 发布

€雁&痕

最新推荐文章于 2024-09-07 16:07:08 发布

阅读量178

点赞数

分类专栏： VUE 文章标签： vue js javascript vue.js

本文链接：https://blog.csdn.net/L_heng_yan/article/details/109318928

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

路由学习笔记

发展
后端渲染（后端路由）------前后端分离（比如jquery开发模式）------单页面富应用阶段（SPA页面）（前端路由）
前端路由：存储着url与页面的映射关系，即与组件的映射关系（一个页面就是一个大组件）
改变url但不需要页面刷新，即不用向浏览器重新请求的两个方法
改变哈希值：location.hash = ‘自定义’
通过history对象：
history.pushState({ }, ’ ‘, ’ 自定义’) //入栈
history.back() //出栈
history.forward() //前进1位
history.go(数字) //history.go(-1) = history.back() history.go(1)=history.forward()
history.replaceState({ }, ’ ', ‘home’) //使用该方法则浏览器的后退、前进按钮均不能使用，即没有缓存
使用VueRouter
准备工作：通过Vue.use(VueRouter) 安装插件，然后创建VueRouter对象，最后将VueRouter对象挂载到Vue中，接下来就可以使用了
使用router：配置router映射对象—创建导航-------实现占位
: 该标签默认被渲染成a标签,可通过 tag=“标签” 属性修改，加上replace代表浏览器后退、前进按钮失效。活跃中的router-view自动带上一个类名(需要时自己查看，可通过该类名对正在被渲染的标签加上style样式)
路由通过代码代码跳转，不需要
<标签 @click=“ $r o u t e r . p u s h (^{'} 路径^{'}) " > < 标签 @ c l i c k = "$ router.replace(‘路径’)”>
动态路由：有时候需要获取一些用户信息，而该信息不确定，路径不确定，需要动态路由实现
映射配置：path: ’ /user / : userId ’ //userId是自定义的名字
动态绑定: v-bind: to = "/user / + userId " //动态绑定才能将userId作为变量解析，不绑定的话整个会被解析为字符串，最后找不到路径
获取信息：this. $r o u t e . p a r a m s . u s e r I d / /$ route代表正在活跃的路由
路由的懒加载：将对应的组件打包成一个个js代码块，被访问是才加载
导入时使用箭头函数： const Home = () =>import (’…/components/Home’)
路由的嵌套：使用children配置映射关系
路由参数传递：通过动态路由传递（前面已介绍）
通过query类型传递 (看后续代码了解)
了解路径组成： scheme://host:port/path?query#fragment
全局导航守卫
生命周期函数：
created() {} //组件被创建时都会回调该函数
mounted() {} //组件挂载到dom时都会回调
updated() {} //页面发生刷新时都会回调（数据改变也会刷新）
destroyed() {} //组件销毁时都会被调用
需求：每点击请求页面时改变浏览器title标题，比如点击首页，浏览器标题显示首页，点击关于，浏览器标题显示关于
方法：1.为每个组件添加created() {document.title (" 名称")} //太繁琐，每个组件都需要写一遍
2.调用前置守卫 router.beforeEach函数
前置守卫：router.beforeEach( (to , from , next) => { } ) //next()必须调用
后置钩子：router.afterEach (( to, from) => { } )
（了解）路由守卫：beforeEnter( (to , from , next) => { } ) //next()必须调用
组件守卫：beforeRouterEnter( (to , from , next) => { } ) //next()必须调用
beforeRouterUpdate( (to , from , next) => { } ) //next()必须调用
beforeRouterLeave( (to , from , next) => { } ) //next()必须调用
keep-alive: Vue的一个内置组件，可使被包含的组件保留状态，避免重新渲染
两个重要属性 include 和 exclude
activated(){} //活跃时调用 deactivated(){} //不活跃时调用
这两个函数都是只有使用了keep-alive才有效，不然不能使用

router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'
//路由的懒加载
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const Profile = () => import('../components/Profile')


//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

const routes = [
  //配置映射关系，一条映射就是一个对象
  {
    path: '',  //修改默认路径，一进入网页就是首页，不需要用户选择才出现首页
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    //路由的嵌套
    children:[
      // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',  //不是/news,不需要加斜杆
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {        //元数据
      title: '关于'
    },
  },
  {
    path: '/user/:userId',
    component: User,
    meta: {
      title: '我的'
    },
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    },
  }
]

//2.创建VueRouter对象
export const router = new VueRouter({
  routes ,//配置路由映射关系
  model: history
})

router.beforeEach((to,from,next) => {
  //从from跳转到to
  document.title = to.matched[0].meta.title
  next() //必须调用
})

App.Vue文件

<template>
  <div>
    <h2>我是APP组件</h2>
    <p>我是APP组件内容</p>
<!--       通过标签来使用router， 也可在click后跟上函数实现   -->
<!--    <button @click="$router.push('/home')">首页</button>-->
<!--    <button @click="$router.push('/about')">关于</button>-->

    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="/user/ + userId">我的</router-link>
<!--    通过query传递参数 方式1 -->
    <router-link :to="{path:'/profile',query:{name:'heng',age:18,height:166}}">档案</router-link>
    <!--    通过query传递参数 方式2 -->
<!--    <button @click="profileClick">档案</button>-->
    <!--  用router-view 作为News和Message占位符 -->
    <keep-alive exclude="Profile,User">
<!--      Profile,User中间就一个逗号，不能加空格-->
      <router-view></router-view>
    </keep-alive>

  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      userId: "zhangsan",
    }
  },
  methods: {
    profileClick(){
      this.$router.push({
        path: 'profile',
        query: {
          name: 'heng',
          age: 18,
          height: 166
        }
      })
    }
  }
}
</script>

<style>
.router-link-active{
  color: red;
}
</style>

main.js 文件

import Vue from 'vue'
import App from './App'
import {router} from './router'

//  3. 将router对象挂载到Vue中
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Home.vue文件

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容，哈哈哈</p>
<!--    路由的嵌套 ，嵌套的组件要在相应的外组件占位  -->
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    
  </div>
</template>

<script>
  export default {
    name: "Home",
    data(){
      return {
        path:'/home/news'
      }
    },
    methods:{
      activated(){
        this.$router.push(this.path)
      },
      beforeRouteLeave(to,from,next){
        this.path = this.$route.path
        next()
      }
  }
  }
</script>

<style scoped>

</style>

HomeNews.vue文件

<template>
  <div>
    <h2>我是Home的news组件</h2>
    <p>我是news组件的内容</p>
  </div>
</template>

<script>
  export default {
    name: "HomeNews"
  }
</script>

<style scoped>

</style>

HomeMessage.vue文件

<template>
  <div>
    <h2>我是Home的message组件</h2>
    <p>我是message组件的内容</p>
  </div>
</template>

<script>
  export default {
    name: "HomeMessage"
  }
</script>

<style scoped>

</style>

About.vue文件

<template>
  <div>
    <h2>我是关于</h2>
    <p>我是关于内容，呵呵呵</p>
  </div>
</template>

<script>
  export default {
    name: "About"
  }
</script>

<style scoped>

</style>

User.vue文件

<template>
  <div>
    <h2>这是User组件</h2>
    <p>我的User组件的内容</p>
<!--    取出userId  -->
    <h3>{{$route.params.userId}}</h3>
  </div>
</template>

<script>
  export default {
    name: "User"
  }
</script>

<style scoped>

</style>

Profile.vue文件

<template>
  <div>
    <h2>我是Profile组件</h2>
<!--    query传递参数的获取-->
    <h3>{{$route.query.name}}</h3>
    <h3>{{$route.query.age}}</h3>
    <h3>{{$route.query.height}}</h3>
  </div>
</template>

<script>
  export default {
    name: "Profile"
  }
</script>

<style scoped>

</style>