VUE进阶篇Part11（vue-route和前端状态管理）---上

àì夳堔傛蜴生んèń 2022-10-01 10:53 209阅读 0赞

此章节内容包括：  
1、路由的基本用法  
2、路由的跳转（网页上点击链接跳转到另一个网页）  
3、通过路由去传递参数

#### 1、前端路由的基本用法 ####

此章节一定要先看前面写的Part10（vue-cli搭建脚手架）或者用过vue-cli的再看，不然可能会的有点蒙

##### 什么是路由？ #####

\----通俗的来讲，其实就是网址。

比如 [http://www.baidu.com/111][http_www.baidu.com_111] ，这个后缀 /111 的网址无论能否显示出来都是一个网址，这就是一个路由，访问不同的路由，就会加载不同的组件。

#### 用一个例子去理解用法： ####

需求：使用npm run dev 后打开localhost:8080，在网址后面输入/hello才显示文字内容，即 localhost:8080/hello

##### 1.1、安装（在项目目录下） #####

npm install --save vue-router

##### 1.2、引用 #####

在搭建vue-cli中默认创建的my-project中的main.js中引用

![在这里插入图片描述][20190611213828343.png]

import Vue from 'vue'
    import App from './App'
    //1.先装好router
    import router from 'vue-router'
    //这里的HelloWorld是一个组件，在components文件下，所以这样引入
    import HelloWorld from './components/HelloWorld'
    
    //2.调用这个router
    Vue.use(router)

##### 1.3、调用router #####

项目中的HelloWorld.vue其实是一个组件，并且代表的内容是这个文字部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70]

import Vue from 'vue'
    import App from './App'
    //1.先装好router
    import router from 'vue-router'
    //这里的HelloWorld对应的是components文件下的HelloWorld组件，所以这样引用
    import HelloWorld from './components/HelloWorld'
    
    //2.调用这个router
    Vue.use(router)
    Vue.config.productionTip = false
    
    //3.配置路由文件，并在vue实例中引入
    var rt = new router({ 
      //这个routes里面可以定义很多个
      routes: [{ 
        path: '/hello',//指定要跳转的路径
        component: HelloWorld//指定跳转到上面的路径后，渲染出来的组件
      }]
    })
    
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      //将上面配置好的router，在这里调用一下
      router: rt,
      components: {  App },
      template: '<App/>'
    })

##### 1.4、确定视图的加载位置 #####

视图加载需要在App.vue中设置：  
![在这里插入图片描述][20190611215011292.png]

<template>
      <div id="app">
        <img src="./assets/logo.png">
        
        <router-view></router-view>
      </div>
    </template>
    
    <script> export default { name: 'App' } </script>
    
    <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

##### 结果 #####

如果直接输入localhost:8080，显示的页面是：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 1]  
输入 /hello 后缀后会渲染出文本内容，表示这个路由就设置好了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 2]

#### 2、路由的跳转 ####

路由的跳转，就是指你在一个网页上点击一个链接会跳转的另一个网页去。

实际上那另一个网页也是提前配置好了的，vue检测到你点击了就会自动渲染该网页所写好的组件，这就是路由的跳转。

##### 需求： #####

初始页面中显示Hello World和Hello Earth，点击那个就跳到以哪个为后缀的网站

##### 实现过程： #####

1、这里既然需要跳转到两个页面中，那么就需要先配置好两个路由，一个后缀为helloworld，一个后缀为helloearth

在router文件下的index.js中配置

import Vue from 'vue'
    import router from 'vue-router'
    //这里要先把这两个组件导入进来，这个文件时专门用来放前端路由的
    import HelloWorld from '../components/HelloWorld'
    import HelloEarth from '../components/HelloEarth'
    
    Vue.use(router)
    
    //export default 表示这个模块的导出
    export default new router({ 
    	//这里的router可以定义多个
    	routes:[{ 
    		path:'/helloworld',	//指定要跳转的路径，就是网站后缀
    		component: HelloWorld	//在这个网页下要渲染出来的组件
    	},{ 
    		path:'/helloearth',
    		component: HelloEarth
    	}]
    })
    /* 总结： 当引入一个新的路由时要进行的步骤 1、先在components里面定义好组件，比如HelloEarth.vue 2、定义好之后在index.js中引入，需要import一下，并且写好跳转的路径path和跳转的组件名component 3、结束 */

2、在components文件下写好对应的组件

HelloWorld.vue 已经默认已经写好了所以就不写了

HelloEarth.vue 文件内容

<template>
      <div class="hello">
        <h1>Hello Earth</h1>
        <h2>Essential Links</h2>
        <hr>
      </div>
    </template>
    
    <script> export default { name: 'HelloEarth', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
    
    <style scoped> </style>

因为需要点击才显示，所以再写一个 list.vue 组件，放在项目入口，就是首页把这两个连接显示出来

list.vue 文件内容

<template>
        <ul>
            <li>
                
                <router-link to="/helloworld">HELLO WORLD</router-link>
            </li>
            <li>
                <router-link to="/helloearth">HELLO EARTH</router-link>
            </li>
        </ul>
    </template>
    
    <script> export default { name:'list' } </script>
    
    <style scoped> </style>

写好之后把 list 放到项目入口 App.vue文件内，记得先 import 导入一下

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
        
        <list/>
      </div>
    </template>
    
    <script> //项目入口引入组件的三个步骤 //1、在App.vue中导入 import list from './components/list'; export default { name: "App", //2、在components中引入 components: { list } }; </script>

##### 结果验证： #####

###### 首页： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 3]

###### 点击HELLO WORLD： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 4]

###### 点击HELLO EARTH： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 5]  
以上就实现了网页之中的链接跳转

#### 3、通过路由去传递参数 ####

在实际业务中会经常会有向某些组件传递一些参数，这时候就可以使用路由去传递

##### 具体实现步骤 #####

1、必须在路由器内加入路由的 name 属性  
2、必须在path后加 /： + 传递的参数

在 router 下的 index.js 中写

//export default 表示模块的导出
    export default new router({ 
      //这个routes里面可以定义很多个
      routes: [{ 
        name:'helloworld',
        path: '/helloworld/:worldmsg',//指定要跳转的路径
        component: HelloWorld//指定要跳转的组件
      },{ 
        name:'helloearth',
        path: '/helloearth/:earthmsg',//指定要跳转的路径
        component: HelloEarth//指定要跳转的组件
      }]
    })

3、传递参数和接收参数请看以下的代码  
（其中name，和params是固定的，记得前面是 :to，要加冒号）

###### 传递参数: :to="\{name:’ ‘,params:\{xxx:’ '\}\}" ######

在 components 文件下的 list.vue 中写：

<template>
        <ul>
            <li>
                
                <router-link :to="{name:'helloworld',params:{worldmsg:'保护世界和平！'}}">HELLO WORLD</router-link>
            </li>
            <li>
                <router-link :to="{name:'helloearth',params:{earthmsg:'保护地球环境！'}}">HELLO EARTH</router-link>
            </li>
        </ul>
    </template>
    
    <script> export default { name:'list' } </script>
    
    <style scoped> </style>

###### 接受参数 在对应的组件中 $[route.params.xxx][] ######

HelloWorld.vue 中：

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <h2>Hello World</h2>
       	<p>{
       {$route.params.worldmsg}}</p>
      </div>
    </template>

HelloEarth.vue 中

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <h2>Hello World</h2>
       	<p>{
       {$route.params.earthmsg}}</p>
      </div>
    </template>

#### 结果 ####

###### 点击Hello World: ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 6]

###### 点击Hello Earth: ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 7]

[http_www.baidu.com_111]: http://www.baidu.com/111
[20190611213828343.png]: /images/20220118/451c68b9c2544cc49743b27db0290afd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70]: /images/20220118/c4bc679fa7ff47d4b69fbebd00ca9527.png
[20190611215011292.png]: /images/20220118/439f973e444147bc82cd67d73851e02a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 1]: /images/20220118/e76c1e0a6f3b470faae33209d58522ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 2]: /images/20220118/90afd3d5cec44bd59283923bea6ab393.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 3]: /images/20220118/697431c1e4ff4a3e9be2bff2b9052bf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 4]: /images/20220118/5f3c1149cb524e92ad621713dce997bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 5]: /images/20220118/3b3e5d82bbef40c5acc923e4202519ec.png
[route.params.xxx]: http://route.params.xxx
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 6]: /images/20220118/30038dd2f41247cab4ba85cc225faaae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 7]: /images/20220118/d483fa60eedc4b259b093ba1c175a56b.png