Vue05

最新推荐文章于 2024-06-19 07:00:00 发布

uxiang_blog

最新推荐文章于 2024-06-19 07:00:00 发布

阅读量218

点赞数

分类专栏： # 前端三要素和前端框架

本文链接：https://blog.csdn.net/uxiang_blog/article/details/107710099

版权

前端三要素和前端框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言：此据狂神哔哩哔哩视频所写，转载请自觉附上链接，若有不妥之处，欢迎指正。

十一、路由（vue-router）

10.1、什么是路由vue-router？

【说明：】学习的时候，尽量打开官方文档

Vue Router是Vue.js官方路由管理器。它和Vue.js的核心深度集成，让构建但页面应用变得易如反掌。包含功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、配置符
基于Vue.js过度系统的视图过度效果i
细粒度的导航控制
带有自激活的CSS class 的链接
HTML5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为

10.2、为什么用路由vue-router？

vue-router是一个页面跳转的组件，并不需要像以前一样会通过服务器来跳转，有了这个组件，前端就可以完成跳转任务。

10.3、怎么使用路由vue-router？

【安装】

基于第一个vue-cli进行测试学习；先查看node_modules中是否存在vue-route

vue-router是一个插件包，所以我们还需要用npm/cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须通过Vue.use()明确安装路由功能：

import Vue from 'vue'
import VueRouter 'vue-router'

Vue.use(VueRouter);

【测试】

1、先删除没有用的东西

2、components目录下存放我们自己编写的组件

3、定义一个Content.vue的组件

【具体操作步骤】

1、删除没有用的东西

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VmuGDD9O-1596166789127)(C:%5CUsers%5C%E6%B8%B8%E7%BF%94%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200726105456323.png)]

2、安装vue-router插件包

输入npm install vue-router --save-dev 命令进行安装，有可能会出现安装不成功的情况，根据提示进行修补npm audit fix，最后安装成功后可以在node_modules模块中发现vue-router插件包，则证明安装成功。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d6cXCOji-1596166789128)(C:%5CUsers%5C%E6%B8%B8%E7%BF%94%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200726111517364.png)]

3、在main.js导包，显示声明使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDOu6ANH-1596166789130)(C:%5CUsers%5C%E6%B8%B8%E7%BF%94%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200726113307910.png)]

4、在控制台输入启动当前项目的命令 npm run dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sh7AwDR-1596166789132)(C:%5CUsers%5C%E6%B8%B8%E7%BF%94%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200726113920217.png)]

5、按住Ctrl +点击链接访问浏览器页面，在控制台（Console）查看，没有报错就说明成功了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wAB1M6li-1596166789133)(C:%5CUsers%5C%E6%B8%B8%E7%BF%94%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200726114239543.png)]

6、使用一个组件(以Content为例)【自己的理解】

首先，在项目components模块中写一个组件Content.vue

6.1、main.js、App.vue与Content.vue之间的关系

Vue之前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF_8">
    <title>01HelloWorld</title>
</head>
<body>

<div id="app"> 
    <input type="text" v-model="msg">
    <P>Hello {{ msg }}</P>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //创建Vue实例
    const vm = new Vue({//配置对象
       el: '#app',  //element：选择器
        data: {    //数据（model）
            msg: 'Hello Vue!'
        }
    })
</script>

</body>
</html>

由2部分组成，一个div标签和一个Vue实例一一对应，而在淘宝，京东这些实用的网页上面往往是由有很多个标签错综复杂组合在一起，而这意味着就创建很多个了Vue实例，照这样的情况，随着Vue实例的增多，重复多余的代码将会越来越多，然而事实并非如此。

Vue之后：

main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'ruvue-router'

Vue.config.productionTip = false
//显示声明使用VueRouter
Vue.use(VueRouter);


new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

由3部分组成，分别是==import…from’…’==的导包部分，Vue.sue(…)显示声明使用以及new Vue实例部分。
App.vue

<template>
  <div id="app">

  </div>
</template>

<script>
import Content from './components/Content'
export default {
  name: 'App',
  comments: {
    Content
  }
}
</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>

由3部分组成，分别为template显示页面内容、script“衔接关系”和style全局显示页面样式部分组成
Content.vue

<template>
  
</template>
<script>
export default {
  name: 'Content'
}
</script>
<style scoped>
</style>

由3部分组成，分别是分别为template页面内容、script“衔接关系”和style局部(scoped)显示页面样式部分组成，style标签当加上作用域scoped时表示只在当前页面生效，不加时就会在所有页面生效。

其三者关系是：main.js充当了new Vue()实例部分，App.vue其实就是以前的div标签部分，不同的是在它的基础上可以通过script部分由其他组件Content.vue定义export default { }对外接口和主组件App.vue加载import…from’…'引入其他嵌入组件，如此其他组件Content.vue就嵌入主组件App.vue里面了，这样做的好处是当一个组件出现问题时，只处理这个组件的事情，不会影响其他组件的调用，便于后期代码查找和维护。

6.2、引入vue-router和主页面Main.vue

以上代码，点击App.vue comments: {}中的Content会跳转到Content.vue，但Vue中跳转页面有专门的组件，这时候就要引入vue-router了，并不需要

import Content from './components/Content'

comments: {
    Content
  }

首先，在src下面新建router目录，里面建一个index.js文件,用来专门配置所有的路由,再main.js里面启动

index.js

import Vue from 'Vue'
import VueRouter from 'vue-router'
import Content from '../componoent/Content'

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
     {
      //路由路径
      path: '/content',
      name:'name'
      //跳转的组件
      component: Content
      }，
      {
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main
      }
  ]
});

main.js

import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

接着，在components里面新建一个Main.vue,将其配置到ruoter中的index.js中，见上面。

Main.vue

<template>
    <h1>首页</h1>
</template>
<script>
export default {
    name: 'Main'    
}
</script>
<style scoped>

</style>

最后，在App.vue里面书写跳转标志

<template>
  <div id="app">
    <router-link to='/main'>首页</router-link>
    <router-link to='/content'>内容页</router-link>
    <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>

6.3、效果展示

当点击“首页”时会跳转到Main.vue页面，当点击“内容页时会跳转到Content.vue页面。

在这里插入图片描述