Vue cli之路由router
2021/10/1 23:14:01
本文主要是介绍Vue cli之路由router,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、安装路由
Vue-router用于提供给vue项目在开发中用于绑定url和组件页面的关系的核心插件。
默认情况下,vue没有提供路由的功能,所以我们使用vue-router
,并需要在项目根目录。
npm install vue-router
安装了vue-router插件以后,我们必须要对路由进行初始化并且还要绑定组件与url地址之间的路由映射关系。
首页,我们需要在一个单独的目录router下创建路由文件index.js,实例化路由对象并绑定组件和url地址的关系。
二、基本使用
在src路径下创建router/index.js,代码:
import VueRouter from "vue-router"; import Vue from "vue"; Vue.use(VueRouter); import Home from "../views/Home"; import HelloWorld from "../components/HelloWorld"; import Forecast from "../components/Forecast"; export default new VueRouter({ mode: "history", // hash 表示以地址栏的哈希值作为路径,history以历史对象的url作为路径 routes:[ // 路由列表,里面的每一个成员都是一个url地址和组件的映射关系 { path: "/", component: Home, }, { path: "/hi", component: HelloWorld, }, { path: "/index", component: Forecast, } ] });
main.js,代码:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' // 没有声明路径,则默认从node_module中导包过来 import App from './App' // 如果由声明了路径,则表示从当前文件出发根据路径关系进行导报 import axios from "axios"; import router from "./router/index"; // 导入路由对象 // 初始化axios对象 Vue.prototype.$http = axios.create(); Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
App.vue,代码:
<template> <div id="app"> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/>--> <!-- <Home></Home>--> <router-view></router-view> </div> </template> <script> // import HelloWorld from './components/HelloWorld.vue' // import Home from './views/Home' export default { name: 'App', components: { // HelloWorld // Home } } </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>
三、页面跳转
vue-router提供了2种写法让我们实现页面跳转。
1、通过router-link来跳转
App.vue,代码:
<template> <div id="app"> <p><a href="/">Home</a></p> <p><a href="/hi">HI</a></p> <p><a href="/index">Index</a></p> <hr> <p> <router-link to="/">Home</router-link> </p> <p> <router-link to="/hi">HI</router-link> </p> <p> <router-link :to="url">Index</router-link> </p> <hr> <router-view></router-view> </div> </template> <script> export default { name: 'App', // 组件名 data() { return { url: "/index", } }, components: { // 子组件 } } </script> <style> </style>
注意:一般在开发中不会在App.vue编写具体的代码,我们这里仅仅是为了方便学习演示。
2、通过this.$router来跳转
App.vue,代码:
<template> <div id="app"> <a href="" @click.prevent="goto">Index</a> <hr> <router-view></router-view> </div> </template> <script> export default { name: 'App', // 组件名 data(){ return { url: "/index", user: "root", } }, methods:{ goto(){ // 页面跳转 if(this.user === "root"){ this.$router.push("/index"); // ajax页面跳转到指定的路由地址 // this.$router.back(); // 跳转返回上一页 // this.$router.go(-1); // -1相当于back,后退一页 // this.$router.go(1); // 1表示forward,前进一页 } } }, components: { // 子组件 } } </script> <style> </style>
四、传递参数
vue-router提供了2种用于开发中传递参数的方式给我们使用。
1、路径参数
url地址的路径作为变量,传递参数到下一个页面组件中进行获取使用。
router/index.js,代码:
import VueRouter from "vue-router"; import Vue from "vue"; Vue.use(VueRouter); import Home from "../views/Home"; import HelloWorld from "../components/HelloWorld"; import Forecast from "../components/Forecast"; import Article from "../components/Article"; export default new VueRouter({ mode: "history", // hash 表示以地址栏的哈希值作为路径,history以历史对象的url作为路径 routes:[ // 路由列表,里面的每一个成员都是一个url地址和组件的映射关系 { path: "/", component: Home, }, { path: "/hi", component: HelloWorld, }, { path: "/index", component: Forecast, }, { path: "/article/:year/:month", component: Article, }, ] });
Article.vue,代码:
<template> <div> 查询{{year}}年{{month}}的系列文章 </div> </template> <script> export default { name: "Article", data(){ return { year: 0, month: 0, } }, created() { this.year = this.$route.params.year; this.month = this.$route.params.month; } } </script> <style scoped> </style>
2、查询参数
url地址的查询字符串作为参数,在下一个页面组件中进行获取使用。
App.vue:
<template> <div id="app"> <a href="" @click.prevent="goto">Index</a> <hr> <router-view></router-view> </div> </template> <script> export default { name: 'App', // 组件名 data(){ return { url: "/index", user: "root", } }, methods:{ goto(){ // 页面跳转 if(this.user === "root"){ this.$router.push("/index?city=南京"); // ajax页面跳转到指定的路由地址 } } }, components: { // 子组件 } } </script> <style> </style>
Forecast.vue,代码:
<template> <div> <input type="text" v-model="city"> <button @click="get_weather">获取天气</button> <table v-if="weather_list.length>1"> <tr> <th>日期</th> <th>天气</th> <th>温度</th> <th>风向</th> </tr> <tr v-for="weather in weather_list"> <td>{{weather.date}}</td> <td>{{weather.type}}</td> <td>{{weather.low}}~{{weather.high}}</td> <td>{{weather.fengxiang}}{{weather.fengli|format}}</td> </tr> </table> </div> </template> <script> export default { name: "Index", data(){ return { city: "北京", weather_list:[], } }, filters:{ format(content){ return content.replaceAll("<![CDATA[","").replaceAll("]]>",""); } }, created(){ // 任意一个组件中都可以获取查询参数 console.log(this.$route.query); // 获取所有的查询参数 if(this.$route.query.city){ this.city = this.$route.query.city } }, methods:{ get_weather(){ // 发送http请求获取天气 this.$http.get("http://wthrcdn.etouch.cn/weather_mini",{ params:{ city: this.city, } }).then(response=>{ console.log(response.data.data.forecast); this.weather_list = response.data.data.forecast; }).catch(error=>{ console.log(error); }) } } } </script> <style scoped> table{ width: 800px; border-collapse: collapse; } td,th{ border: 1px solid red; } </style>
这篇关于Vue cli之路由router的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略