Vue路由(vue-router)详细讲解指南
作者:互联网
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转;
首先我们来学习三个单词(route,routes,router):
route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由;
routes:它是个复数,表示多个的集合才能为复数;即我们可以理解为多个路由的集合,JS中表示多种不同状态的集合的形式只有数组和对象两种,事实上官方定义routes是一个数组;所以我们记住了,routes表示多个数组的集合;
router:译为路由器,上面都是路由,这个是路由器,我们可以理解为一个容器包含上述两个或者说它是一个管理者,负责管理上述两个;举个常见的场景的例子:当用户在页面上点击按钮的时候,这个时候router就会去routes中去查找route,就是说路由器会去路由集合中找对应的路由;
我们结合一个小demo来看(文章有点长,耐心慢慢看,学得慢才能进步的快,当然可以跟着一起敲):
首先需要安装vue-cli来构建一个vue的开发环境(怎么安装这里不讲,自己百度去,如果这种问题自己都解决不了的话,后面的知识可能对你来说收益不大)
安装完vue-cli之后,我们的项目目录结构如下:
然后我们在命令行中输入npm install vue-router -g来安装vue-router,安装完之后我们可以打开package.json文件,在package.json文件中可以看到vue-router的版本号;
到这一步我们的准备工作就完成了,要进行写demo了;
我们在src目录下新建三个文件,分别为page1.vue和page2.vue以及router.js:
page1.vue:
<template> <div> <h1>page1</h1> <p>{{msg}}</p> </div> </template> <script> export default { data () { return { msg: "我是page1组件" } } } </script>
page2.vue:
<template> <div> <h1>page2</h1> <p>{{msg}}</p> </div> </template> <script> export default { data () { return { msg: "我是page2组件" } } } </script>
router.js
//引入vue import Vue from 'vue'; //引入vue-router import VueRouter from 'vue-router'; //第三方库需要use一下才能用 Vue.use(VueRouter) //引用page1页面 import page1 from './page1.vue'; //引用page2页面 import page2 from './page2.vue'; //定义routes路由的集合,数组类型 const routes=[ //单个路由均为对象类型,path代表的是路径,component代表组件 {path:'/page1',component:page1}, {path:"/page2",component:page2} ] //实例化VueRouter并将routes添加进去 const router=new VueRouter({ //ES6简写,等于routes:routes routes }); //抛出这个这个实例对象方便外部读取以及访问 export default router
这里我们再修改一下main.js
import Vue from 'vue' import App from './App' //引用router.js import router from './router.js' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', //一定要注入到vue的实例对象上 router, components: { App }, template: '<App/>' })
修改App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <div> //router-link定义页面中点击触发部分 <router-link to="/page1">Page1</router-link> <router-link to="/page2">Page2</router-link> </div> //router-view定义页面中显示部分 <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>
就这样,我们的页面就可以进行路由跳转和切换了,路由的基本使用就完成了;但是有个问题就是我们第一次进去是看不到路由页面的,这是因为我们没有设置默认值,我们首次进入的时候路径是为空的,那么我们可以这么解决:
router.js
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter) import page1 from './page1.vue'; import page2 from './page2.vue'; import user from './user.vue' const routes=[ {path:'/page1',component:page1}, {path:"/page2",component:page2}, //可以配置重定向 {path:'',redirect:"page1"} //或者重新写个路径为空的路由 {path:"",component:page1} ] const router=new VueRouter({ routes }); export default router
标签:Vue,vue,routes,router,page2,路由,page1 来源: https://www.cnblogs.com/sifd/p/16258512.html