vue 2.0路由之路由嵌套示例详解

  • Z时代
  • 2024-01-10
  • 分类：综合

前言

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="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/vue-router.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  /* 1、创建组件 */
  var Home = Vue.extend({
   template: '#home',
   data: function() {
    return {
     msg: 'Hello, vue router!'
    }
   }
  });
  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>'
  });
  // 2. 创建 router 实例，然后传 `routes`路由映射 配置
  var router = new VueRouter({
   routes: [
   { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/out', component: Out },
    {path: '/', component: Home },//设置默认路径
   { path: "*", component:Home }//路径不存在
   ]
  });
  // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
  var vm = new Vue({
    router: router 
  }).$mount('#app');
  // 现在，应用已经启动了！
 </script>
</body>
</html>

关于路由嵌套

在配置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上，另外还总结了一些自己最近在学习的阿里云上传图片等，会逐步更新，敬请指教！

总结

以上是 vue 2.0路由之路由嵌套示例详解 的全部内容， 来源链接： utcz.com/z/313956.html

回到顶部