网络编程

vue 2.0路由之路由嵌套示例详解
网络编程 2025/10/24 佚名
3 2

前言

vue一个重要的方面就是路由，下面是自己写的一个路由的例子分享给大家供大家参考学习，下面来看看详细的介绍。

方法如下：

1、引入依赖库就不必再说

2、创建组件

两种写法

第一种：间接

 <template id="home">

 <div>

  <h1>Home</h1>

  <p>{{msg}}</p>

 </div>

 </template>
 var About = Vue.extend({

   template: '#about'

  });

第二种：直接

  var Out = Vue.extend({

   template: '<div><h1>Out</h1><p>This is the tutorial out vue-router.</p></div>'

  });

3、创建 router 实例，传 'routes'路由映射配置

var router = new VueRouter({

   routes: [

   { path: '/路径', component: 组件名 },

    { path: '/', component: 组件名}, //设置默认路径

　　　　　{ path: "*", component:Home }//路径不存在   <br>　　　　] 

 });

4、创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能

var vm = new Vue({

    router: router 

 }).$mount('#app');

整体的demo

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>hello world</title>

</head>

<body>

 <div id="app">

  <div>

   <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->

   <router-link to="/home">Go to Home</router-link>

   <router-link to="/about">Go to About</router-link>

   <router-link to="/out">Go to Out</router-link>

  </div>

 

  <!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->

  <!--这里显示的是展示的界面-->

  <router-view></router-view>   

 </div>

  

 <template id="home">

   <div>

    <h1>Home</h1>

    <p>{{msg}}</p>

   </div>

 </template>

 <template id="about">

   <div>

    <h1>about</h1>

    <p>This is the tutorial about vue-router.</p>

   </div>

 </template>

  

   

 

 <!-- 0、引入依赖库 -->

 <script src="/UploadFiles/2021-04-02/vue2.0.js">


关于路由嵌套


在配置routes映射时添加children配置


如下：





var router = new VueRouter({

 routes:[

  {path:'/home',component:Home,

   children:[//子路由

    {path:'news',component:News},

    {path:'change',component:change}    

  ]},

  {path:'/me',component:Me},

  {path:'/',component:Me}

  ]

 　　}) 





关于具体的demo可以参考GitHub上，另外还总结了一些自己最近在学习的阿里云上传图片等，会逐步更新，敬请指教！


总结


以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
标签：
vue2,嵌套路由设置,vue2,路由嵌套,vue,router2,嵌套路由
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“vue 2.0路由之路由嵌套示例详解”

暂无“vue 2.0路由之路由嵌套示例详解”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com