Vue-Router

最新推荐文章于 2024-06-18 22:29:23 发布

坏萝卜

最新推荐文章于 2024-06-18 22:29:23 发布

阅读量235

点赞数 1

分类专栏： vue2 文章标签： vue

本文链接：https://blog.csdn.net/qq_52135740/article/details/118709366

版权

vue2 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

URL的hash

URL的hash也就是锚点（#）,本质上是改变window.location的href属性

我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新

HTML5的history模式

pushState

history接口是HTML5新增的，它有五种模式改变URL而不刷新页面

history.pushState({},"","home")          //添加新的一层
history.back()      //返回上一层

replaceState

history.replaceState({},"","home")    //替换     不能返回上一层

go

history.go()

history.back()等价于 history.go(-1)
history.forward() 等价于 history.go(1)

认识vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

可以访问其他网站对其进行学习：https://router.vuejs.org/zh/

安装和使用vue-router

步骤一：安装vue-router

npm install vue-router --save

步骤二：在模块化工程中使用它（因为是一个插件，所有可以通过Vue.use()来在安装路由功能）

第一步： 导入路由对象，并且调用Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例

router/index.js

//配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from "vue"

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

//2.创建VueRouter对象
const routes = [

]
const router = new VueRouter({
    //配置路由和组件之间的应用关系
    routes
})

//3.将router对象传入到Vue实例
export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

使用vue-router的步骤：

第一步：创建路由组件
第二步：配置路由映射：组件和路径映射关系
第三步：使用路由：通过<router-link>和<router-view>

App.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<router-link>:该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签
<router-view>:该标签会根据当前的路径，动态渲染出不同的组件

网页的其他内容，比如顶部的标题/导航或者底部的一些版权信息等会和<router-view>处于同一个等级

在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变

router/index.js

//配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from "vue"

import Home from '../components/Home'
import About from '../components/About'
//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [
    {
        path:'/home',
        component:Home
    },
    {
        path:'/about',
        component:About
    },
]
const router = new VueRouter({
    //配置路由和组件之间的应用关系
    routes
})

//3.将router对象传入到Vue实例
export default router

路由的默认路径

如何可以让路径默认跳转到首页，并且<router-view>渲染首页组件呢？

非常简单，我们只需要在配置中多配置一个映射就可以了

{
   path:'',
   // redirect 重定向
   redirect:'/home'
},

配置解析：

我们在routes中又配置了一个映射

path配置的是路径：/

redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了。

router-link补充

改变路径的方式有两种：

URL的hash
HTML5的history
默认情况下，路径的改变使用的URL的hash

如果希望使用HTML5的history模式，非常简单，进行如下配置即可：

const router = new VueRouter({
    //配置路由和组件之间的应用关系
    routes,
    mode: 'history'
})

在前面的<router-link>中，我们只是使用了一个属性:to,用于指定跳转的路径。

<router-link>还有一些其他属性：

tag：tag可以指定<router-link>之后渲染成什么组件，比如下面的代码会被渲染成一个<li>元素，而不是<a>

<router-link to="/home" tag="li">

replace：replace不会留下history记录，所以指定replace的情况下，后退键不能返回到上一个界面中

<router-link to="/home" tag="button" replace>

active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类。
但是通常不会修改类的属性，会直接使用默认的router-link-active即可。

方式一：

App.vue

<router-link to="/about" active-class="active">关于</router-link>

方式二：

router/index.js

const router = new VueRouter({
    //配置路由和组件之间的应用关系
    routes,
    mode: 'history',
    linkActiveClass:"active"                    //添加这一行即可
})

通过代码跳转路由

homeClick(){
//通过代码的方式修改路由vue-router
this.$router.push('/home')
//this.$router.replace('/home')
}

动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：

/user/aaa 或 /user/bbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）。

router/index.js

{
     path:'/user/:userid/:username',
     component:User
},

App.vue

<router-link :to="'/user/' + userid + '/' + username">用户</router-link>
<script>
export default {
  name: "App",
  data() {
    return {
      userid: "007",
      username: "lisi",
    };
  },
};
</script>

展示接收路由信息

User.vue

<template>
  <div>
    <h2>我是用户界面</h2>
    <div>用户id：{{ $route.params.userid }}</div>
    <div>用户名称：{{ $route.params.username }}</div>
    <div>{{ userdata }}</div>
  </div>
</template>

<script>
export default {
  name: "User",
  computed: {
    userdata() {
      return console.log(this.$route.params);
    },
  },
};
</script>

在这里插入图片描述

$route.params

在这里插入图片描述

路由的懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

懒加载的方式

方式一：结合Vue的异步组件和webpack的代码分析

const Home = resolve => {require.ensure(['../components/Home.vue'],()=>{resolve(require('../components/Home.vue'))})};

方式二：AMD写法

const About = resolve => require(['../components/Home.vue'],resolve);

方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和webpack的代码分割

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

嵌套路由

实现嵌套路由有两个步骤：

创建对应的子组件，并且在路由映射中配置对应的子路由。
在组件内部使用<router-view>

router/index.js

在这里插入图片描述

Home.vue

<template>
  <div>
    <h2>我是首页</h2>
    <p>首页内容，哈哈哈哈</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">列表</router-link>
    <router-view></router-view>
  </div>
</template>

传递参数的方式

传递参数主要有两种类型：params和query

params的类型：

配置路由格式：/router/:id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router/123,/router/abc

query的类型：

配置路由格式：/router,也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/router?id=123,/router?id=abc

App.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/' + userid + '/' + username">用户</router-link>
    <router-link
      :to="{ path: '/profile', query: { name: '张三', age: 18, height: 1.88 } }"
      >档案</router-link
    >
    <button @click="btnClick">档案2</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userid: "007",
      username: "lisi",
    };
  },
  methods: {
    btnClick() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "kobe",
          age: 16,
          height: 1.66,
        },
      });
    },
  },
};
</script>
<style scoped>
.active {
  color: red;
}
</style>

坏萝卜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-Router

URL的hashURL的hash也就是锚点（#）,本质上是改变window.location的href属性我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新HTML5的history模式pushStatehistory接口是HTML5新增的，它有五种模式改变URL而不刷新页面history.pushState({},"","home") //添加新的一层history.back() //返回上一层replaceStatehisto
复制链接

扫一扫

专栏目录