vue2 路由多页面

学习课程

B站课程：https://www.bilibili.com/video/BV17h41137i4/?p=127 （需使用浏览器打开）

使用场景

前端整个页面都是由vue来构建，此时将创建多个组件，而vue是单页面应用
为了实现单页面切换不同内容，路由应运而生

路由

与vue-cli是工具不同 vue-router是一款插件

route 路由：负责管理页面的切换
router 路由器：负责管理路由的切换

route由key-value组成，key是url的路径，value是组件页面
不同的url路径对应着不同的value组件页面，点击实现切换组件页面，以达到页面切换的效果，这种切换是局部刷新，因为是局部刷新，所以页面不会转圈圈，视觉效果很好

key1 + value1 = route1
key2 + value2 = route2
key3 + value3 = route3
...

路由与路由器本质

  1. 路由的本质：一个路由表达了一组对应关系(key-value)
  2. 路由器的本质：管理多组对应关系

从用户进入页面开始，路由器一直在干的两件事：

  1. 不停地监视浏览器url地址栏的变化
  2. 监听到url地址栏变化后，路由器去寻找对应的路由，路由再找对应的组件页面，最终切换到对应的组件页面，继续重复监视url地址栏变化

使用路由

安装路由插件

不同的vue版本装不同的vue-router插件，否则会不兼容,无法使用
可以去vue-router官网
也可以直接按照以下来：
vue2版本装vue-router3:npm i vue-router@3 / npm install vue-router@3
vue3版本装vue-router4: npm i vue-router@4 / npm install vue-router@4

自定义安装路由插件版本

也可以百度搜索npmjs，进入后搜索vue-router，查看3和4对应的最新版本
image
例如此处表明了，vue-router3最新的版本是3.6.5，那么输入npm i vue-router@3.6.5 就可以安装最新的3.6.5版本路由了

创建2个组件用于路由测试

HelloWorld组件

点击查看代码 
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
    <h3>Axios</h3>
    <ul>
      <li><a href="javascript:;" @click="postHttp">发起post请求</a></li>
      <div>
        <input type="text" ref="text" style="width:300px">
      </div>
      <li><a href="javascript:;" @click="getHttp">发起get请求</a></li>
    </ul>
  </div>
</template>

<script>
import axios from '../api/request'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    postHttp(){
      axios.post('https://api.uomg.com/api/rand.qinghua', {
          format: 'json'
        })
        .then((response)=> {
          console.log(response);
          this.$refs.text.value=response.content
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getHttp(){
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((response)=> {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

UserInfo组件

点击查看代码 
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li>name：anbin</li>
      <li>sex：man</li>
      <li>age：18</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data(){
    return{
      msg:'用户信息组件'
    }
  },
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

App组件

点击查看代码 
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p>
      <router-link to="/hello">点击切换 helloworld 组件页面</router-link>
    </p>
    <p>
      <router-link to="/user">点击切换 user 组件页面</router-link>
    </p>

    <h1>查看下方组件切换效果</h1>
    <br><br><br>
    <p>
        <router-view msg="HelloWorld"></router-view>
    </p>
  </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>

创建路由目录及路由

在src目录下创建router文件夹，用来管理路由
在router文件夹下创建路由文件,这里以名字叫route.js为例

route.js

// 导入vue
import Vue from 'vue'

// 导入路由对象（npm i vue-router@3下载的就这玩意
import VueRouter from 'vue-router'

// 让vue使用路由对象
Vue.use(VueRouter)

// 导入要路由的组件
import HelloWorld from '../components/HelloWorld.vue'
import UserInfo from '../components/UserInfo.vue'

// 定义路由（规则
const routes = [
//path是路由中的to配置的超链接路径，component是要被切换的组件
  { path: '/hello', component: HelloWorld },
  { path: '/user', component: UserInfo }
]

// 创建路由router实例,传入路由（规则
const router = new VueRouter({
  routes // (js基础知识，缩写) 相当于 routes: routes,当对象名称与对象值同名时，可以这么简写
})

// 暴露路由router实例，供main.js使用
export default router

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 导入route.js的route对象
import router from './router/route'

new Vue({
  render: h => h(App),
  router //相当于 router: router,当对象名称与对象值同名时，可以这么简写
}).$mount('#app')

最终效果

image

posted @ 2024-01-10 15:01  Anbin啊  阅读(102)  评论(0)    收藏  举报