• 售前

  • 售后

热门帖子
入门百科

Vue路由vue-router详细解说指南

[复制链接]
晴空万里659 显示全部楼层 发表于 2021-10-26 13:46:17 |阅读模式 打印 上一主题 下一主题
中文文档:https://router.vuejs.org/zh/
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:
  1. <template>
  2.     <div>
  3.         <h1>page1</h1>
  4.         <p>{{msg}}</p>
  5.     </div>
  6. </template>
  7. <script>
  8.     export default {
  9.         data () {
  10.             return {
  11.                 msg: "我是page1组件"
  12.             }
  13.         }
  14.     }
  15. </script>
复制代码
page2.vue:
  1. <template>
  2.     <div>
  3.         <h1>page2</h1>
  4.         <p>{{msg}}</p>
  5.     </div>
  6. </template>
  7. <script>
  8.     export default {
  9.         data () {
  10.             return {
  11.                 msg: "我是page2组件"
  12.             }
  13.         }
  14.     }
  15. </script>
复制代码
router.js
  1. //引入vue
  2. import Vue from 'vue';
  3. //引入vue-router
  4. import VueRouter from 'vue-router';
  5. //第三方库需要use一下才能用
  6. Vue.use(VueRouter)
  7. //引用page1页面
  8. import page1  from './page1.vue';
  9. //引用page2页面
  10. import page2  from './page2.vue';
  11. //定义routes路由的集合,数组类型
  12. const routes=[
  13.     //单个路由均为对象类型,path代表的是路径,component代表组件
  14.     {path:'/page1',component:page1},
  15.     {path:"/page2",component:page2}
  16. ]
  17. //实例化VueRouter并将routes添加进去
  18. const router=new VueRouter({
  19. //ES6简写,等于routes:routes
  20.     routes
  21. });
  22. //抛出这个这个实例对象方便外部读取以及访问
  23. export default router
复制代码
这里我们再修改一下main.js
  1. import Vue from 'vue'
  2. import App from './App'
  3. //引用router.js
  4. import router from './router.js'
  5. Vue.config.productionTip = false
  6. /* eslint-disable no-new */
  7. new Vue({
  8.   el: '#app',
  9. //一定要注入到vue的实例对象上
  10.   router,
  11.   components: { App },
  12.   template: '<App/>'
  13. })
复制代码
修改App.vue
  1. <template>
  2.   <div id="app">
  3.     <img src="./assets/logo.png">
  4.     <div>
  5. //router-link定义页面中点击触发部分  
  6.       <router-link to="/page1">Page1</router-link>
  7.       <router-link to="/page2">Page2</router-link>
  8.     </div>
  9. //router-view定义页面中显示部分
  10.     <router-view></router-view>
  11.   </div>
  12. </template>
  13. <script>
  14. export default {
  15.   name: 'App'
  16. }
  17. </script>
  18. <style>
  19. #app {
  20.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  21.   -webkit-font-smoothing: antialiased;
  22.   -moz-osx-font-smoothing: grayscale;
  23.   text-align: center;
  24.   color: #2c3e50;
  25.   margin-top: 60px;
  26. }
  27. </style>
复制代码
就这样,我们的页面就可以进行路由跳转和切换了,路由的基本使用就完成了;但是有个标题就是我们第一次进去是看不到路由页面的,这是由于我们没有设置默认值,我们首次进入的时间路径是为空的,那么我们可以这么解决:
router.js
  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. Vue.use(VueRouter)
  4. import page1  from './page1.vue';
  5. import page2  from './page2.vue';
  6. import user   from './user.vue'
  7. const routes=[
  8.     {path:'/page1',component:page1},
  9.     {path:"/page2",component:page2},
  10.     //可以配置重定向
  11.     {path:'',redirect:"page1"}
  12.     //或者重新写个路径为空的路由
  13.     {path:"",component:page1}
  14. ]
  15. const router=new VueRouter({
  16.     routes
  17. });
  18. export default router
复制代码
上面的两种解决方案都是可以解决的,配置重定向的意思就是当匹配到路径为空的时间,就会重定向到page1,实行page1的路由;大概我们也可以重新配置个路由,路径为空的时间router-view展示page1的页面;
用重定向和单独配置路由的区别:
重定向实际上是当匹配到路径符合条件的时间去实行对应的路由,固然这个时间的url上面的地点表现的是对应的路由,页面也是对应的路由页面;
重新配置路由是当匹配到路径符合条件的时间,router-view页面展示部分负责拿符合条件路由的页面来展示,实际上url是没有发生变革的;
那么还有些复杂情况,是基本路由实现不了的;我们来接着往下看
动态路由匹配:
实在我们的生存中有很多这样的例子,不知道大家留意没有?好比一个网站大概背景管理体系中,在我们登录之后,是不是通常会有一个接待回来,XXX之类的提示语,这个我们就可以通过动态路由来实现这个效果;
首先在src目次下新建一个user.vue文件:
  1. <template>
  2.     <div>
  3.         <h1>user</h1>
  4.        //这里可以通过$route.params.name来获取路由的参数
  5.         <p>欢迎回来,{{$route.params.name}}</p>
  6.     </div>
  7. </template>
  8. <script>
  9.     export default {
  10.         data () {
  11.             return {
  12.                 msg: "我是page1组件"
  13.             }
  14.         }
  15.     }
  16. </script>
复制代码
然后我们修改App.vue文件的代码:
  1. <template>
  2.   <div id="app">
  3.     <img src="./assets/logo.png">
  4.     <div>
  5.       <router-link to="/page1">Page1</router-link>
  6.       <router-link to="/page2">Page2</router-link>
  7.     </div>
  8. //添加两个router-link标签
  9.     <div>
  10.       <router-link to="/user/xianyu">动态路由咸鱼</router-link>
  11.       <router-link to="/user/mengxiang">动态路由梦想</router-link>
  12.     </div>
  13.     <router-view></router-view>
  14.   </div>
  15. </template>
  16. <script>
  17. export default {
  18.   name: 'App'
  19. }
  20. </script>
  21. <style>
  22. #app {
  23.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  24.   -webkit-font-smoothing: antialiased;
  25.   -moz-osx-font-smoothing: grayscale;
  26.   text-align: center;
  27.   color: #2c3e50;
  28.   margin-top: 60px;
  29. }
  30. </style>
复制代码
修改我们的router.js
  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. Vue.use(VueRouter)
  4. import page1  from './page1.vue';
  5. import page2  from './page2.vue';
  6. import user   from './user.vue'
  7. const routes=[
  8.     {path:'/page1',component:page1},
  9.     {path:"/page2",component:page2},
  10.     // {path:'',redirect:"page1"}
  11.     {path:"",component:page1},
  12. //使用冒号标记,当匹配到的时候,参数值会被设置到this.$route.params中
  13.     {path:"/user/:name",component:user}
  14.    
  15. ]
  16. const router=new VueRouter({
  17.     routes
  18. });
  19. export default router
复制代码
配置好了,不出意外是能正常运行的,我们来看一下效果:

动态路由匹配给我们提供了方便,使得我们通过配置一个路由来实现页面局部修改的效果,给用户造成一种多个页面的感觉,是不是很酷!!!
酷的同时也会给我们带来一些标题,由于使用路由参数时,从/user/xianyu导航到/user/mengxiang,原来的组件实例会被复用,两个路由都渲染同个组件,比起销毁再创建,表现复用显得服从更高,带来的的只管标题就是生命周期钩子函数不会再被调用,也就是不会再被触发;但是办法总比标题多,我们可以通过监听$route对象来实现;
修改user.vue的代码
  1. <template>
  2.     <div>
  3.         <h1>user</h1>
  4.         <p>欢迎回来,{{msg}}</p>
  5.     </div>
  6. </template>
  7. <script>
  8.     export default {
  9.         data () {
  10.             return {
  11.                 // msg: "我是page1组件"
  12.                 msg:""
  13.             }
  14.         },
  15.         watch:{
  16. //to表示即将要进入的那个组件,from表示从哪个组件过来的
  17.             $route(to,from){
  18.                 this.msg=to.params.name;
  19.                 console.log(111);
  20.             }
  21.         }
  22.     }
  23. </script><br type="_moz" />
复制代码
效果图如下:

我们可以很明显的看到我们监听的$route对象被触发了,控制台也输出了;
下面我们来一起看一下嵌套路由:
嵌套路由:
很多时间我们的页面布局决定了我们大概必要嵌套路由,好比当我们进入主页之后有分类,然后当选择此中一个分类之后进入对应的详情,这个时间我们就可以用到嵌套路由;官方文档中给我们提供了一个children属性,这个属性是一个数组范例,里面实际放着一组路由;这个时间父子关系布局就出来了,以是children属性里面的是路由相对来说是children属性外部路由的子路由;
好记性不如烂代码,让我们通过代码来看一看:
首先在我们的src目次下新建两个vue文件,分别是phone.vue和computer.vue
phone.vue
  1. <template>
  2.     <div>
  3.         <p>{{msg}}</p>
  4.     </div>
  5. </template>
  6. <script>
  7.     export default {
  8.         data () {
  9.             return {
  10.                 msg: "嵌套手机组件"
  11.             }
  12.         }
  13.     }
  14. </script>
复制代码
computer.vue
  1. <template>
  2.     <div>
  3.         <p>{{msg}}</p>
  4.     </div>
  5. </template>
  6. <script>
  7.     export default {
  8.         data () {
  9.             return {
  10.                 msg: "嵌套电脑组件"
  11.             }
  12.         }
  13.     }
  14. </script>
复制代码
然后我们再修改我们的App.vue文件:
  1. <template>
  2.   <div id="app">
  3.     <img src="./assets/logo.png">
  4.     <div>
  5.       <router-link to="/page1">Page1</router-link>
  6.     </div>
  7.     <router-view></router-view>
  8.   </div>
  9. </template>
  10. <script>
  11. export default {
  12.   name: 'App'
  13. }
  14. </script>
  15. <style>
  16. #app {
  17.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  18.   -webkit-font-smoothing: antialiased;
  19.   -moz-osx-font-smoothing: grayscale;
  20.   text-align: center;
  21.   color: #2c3e50;
  22.   margin-top: 60px;
  23. }
  24. </style>
复制代码
通过上面的App.vue文件我们可以看到,我们此时页面只有一个page1的标签了;
我们再来修改router.js
  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. Vue.use(VueRouter)
  4. import page1  from './page1.vue';
  5. import page2  from './page2.vue';
  6. import user   from './user.vue';
  7. import phone  from './phone.vue';
  8. import computer from './computer.vue'
  9. const routes=[
  10.     {
  11.         path:'/page1',
  12.         component:page1,
  13.         children: [
  14.             {
  15.                 path: "phone",
  16.                 component: phone
  17.             },
  18.             {
  19.                 path: "computer",
  20.                 component: computer
  21.             },
  22.         ]
  23.     },
  24.     // {path:"/page2",component:page2},
  25.     // // {path:'',redirect:"page1"}
  26.     // {path:"",component:page1},
  27.     // {path:"/user/:name",component:user}
  28.    
  29. ]
  30. const router=new VueRouter({
  31.     routes
  32. });
  33. export default router
复制代码
为了大家看的直观点,其他路由全部解释了,页面只剩下/page1这一个路由了;

上面说到了,children属性实在就是一个子路由聚集,数组布局里面放着子路由;
效果图如下:

路由导航两种方式:
标签导航:标签导航<router-link><router-link>是通过转义为<a></a>标签进行跳转,此中router-link标签中的to属性会被转义为a标签中的href属性;
  1. //跳转到名为user路由,并传递参数userId
  2. <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
复制代码
编程式导航:我们可以通过this.$router.push()这个方法来实现编程式导航,固然也可以实现参数传递,这种编程式导航一般是用于按钮点击之后跳转
  1. router.push({ name: 'user', params: { userId: 123 }})
复制代码
这两者都会把路由导航到user/123路径
定名路由:
有的时间,通过一个名称来标识一个路由显得更方便一些,以是官方为了方便我们偷懒,又给我们在路由中添加了一个name属性,定名这个属性之后我们访问这个属性就等于直接访问到路由;
平凡路由:
  1. router.push({ path: '/user/:userId', params: { userId: 123 }})
复制代码
定名路由:
  1. router.push({ name: 'user', params: { userId: 123 }})
复制代码
实在两者并没有什么区别,只是提供了两种方式来访问路由,可以通过路径来匹配也可以通过别名来匹配;
以上就是Vue路由vue-router详细讲解指南的详细内容,更多关于Vue路由讲解的资料请关注脚本之家其它干系文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作