Vue.js--前端路由与vue-router

￡神魔★判官ぃ 2021-08-25 01:04 424阅读 0赞

### 前端路由 ###

前端路由，即由前端来维护一个路由规则。实现有两种：

*  **利用url的hash**：就是常说的锚点（\#），JavaScript通过HashChange事件来监听url的改变，IE7及以下需要用轮询；
 *  **利用HTML5的History模式：** 它是url看起来像普通网站那样，以『/』分割，没有\#，但页面并没有跳转，不过使用这种模式需要服务端支持，服务端在接收到所有的请求后，都指向同一个html文件，不然会出现404。因此，SPA只有一个html，整个网站所有的内容都在这一个html里，通过JavaScript来处理；

### vue-router ###

安装vue-router插件：

npm install --save vue-router

在src下新建router文件夹，并在其中新建index.js文件，在其中使用Vue.use()加载和配置路由。

//引入Vue
    import Vue from 'Vue'
    //引入vue-router
    import VueRouter from 'vue-router'
    
    //加载路由插件
    Vue.use(VueRouter)
    
    //创建路由对象
    const router = new VueRouter({ 
    
    })
    
    
    //将router对象导出
    export default router

在main.js中导入路由对象！！！！

import router from './router'

创建两个组件：=  
index.vue:

<template>
      <div>首页</div>
    </template>
    
    <script>
    export default { 
    
    }
    </script>
    
    <style>
    
    </style>

about.vue:

<template>
      <div>介绍页</div>
    </template>
    
    <script>
    export default { 
    
    }
    </script>
    
    <style>
    
    </style>

在src/router/index.js中配置路由信息：

//引入Vue
    import Vue from 'vue'
    //引入vue-router
    import VueRouter from 'vue-router'
    
    
    const Index = () => import('../components/index.vue')
    const About = () => import('../components/about.vue')
    
    //加载路由插件
    Vue.use(VueRouter)
    
    //创建一个数组来指定路由匹配列表，每一个路由映射一个组件
    const routes = [
        { 
            path: '/index',
            //这种写法webpack会把每一个路由打包成一个js文件，实现懒加载也防止main.js文件过大
            component: Index
        },
        { 
            path: '/about',
            component: About
        }
    ]
    
    
    //创建路由对象
    const router = new VueRouter({ 
        //使用HTML5的history模式
        mode: 'history',
        routes
    })
    
    
    //将router对象导出
    export default router

在App.vue中使用两个插件：

<template>
      <div id="app">
          <h2>App</h2>
          <router-link to="/index">index</router-link>
          <router-link to="/about">about</router-link>
    
          <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    
    </style>

*  设置mode为history会开启HTML5的History路由模式，通过"/“设置路径，如果不配置mode，就会使用”\#"来设置路径。
 *  运行网页时，<router-view> 会根据当前路由动态渲染不同的页面组件。路由切换时，切换的是,<router-view>挂载的组件，其他内容并不会发生变化。
 *  在路由列表里页可以添加一项，当访问的路径不存在时，重定向到首页：

{
    	path: '*',
    	redirect: '/index'
    }

启动项目：npm run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]  
点击a标签切换组件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]

### 通过路由列表的path携带参数 ###

例如『个人主页』的场景，路由的一部分是固定的，一部分是动态的：/user/123456，其中用户id『123456』就是动态的，但是他们路由到同一个页面，在这个页面里，期望获取这个id，然后请求相关数据。

配置如下：

{ 
            path: '/user/:id',
            component: () => import('../components/user.vue')
    }

创建user.vue组件：

<template>
      <div>
          <h2>个人主页</h2>
          
          <p>{ { $route.params.id}}</p>
      </div>
    </template>
    
    <script>
    export default { 
    
    }
    </script>
    
    <style>
    
    </style>

浏览器访问：localhost:8080/user/33333  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 3]

### <router-link>的属性 ###

*  **tag：** tag可以指定渲染成什么标签，比如<router-link to="/about" tag=“li”> 渲染的结果就是<li>标签，而不是<a>标签
 *  **replace：** 使用replace不会留下History记录，所以导航后不能用后退键返回上一个页面，如<router-link to="/about" replace>
 *  **active-class：** 当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个名为router-link-active的class，设置prop：active-class可以修改默认的名称

### vue-router的两种跳转页面方法 ###

*  使用内置的<router-link>组件，它会被渲染为一个<a>标签

<template>
    	<div>
    		<h1>首页</h1>
    		<router-link to="/about">跳转到about</router-link>
    	</div>
    </template>

*  使用router实例的方法

<template>
    	<div>
    		<h1>介绍页</h1>
    		<button @click="handleRouter">跳转到user</button>
    	</div>
    </template>
    <script> export default { methods: { handleRouter() { this.$router.push('/user/123'); } } } </script>

$router还有一些其他方法：

*  replace： 类似<router-link>的replace功能，它不会向history添加新记录，而是替换掉当前的history记录，如：this.$router.replace(’/user/123’);
 *  go：类似window.hisroty.go()，在history记录中向前或后退多少步，参数为整数，例如：

//后退1页
    this.$router.go(-1)
    //前进2页
    this.$router.go(2)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/9a676a50fbb24554a55e1c972f33176c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/8b9953fabf584e4a922f24a2dfe4429b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]: /images/20210813/10869009ad21444cb19eb5e2664f6343.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 3]: /images/20210813/501043f2400b4cc3a12f98c0a0677ca5.png