vue-router的基本使用

最新推荐文章于 2022-06-02 00:49:55 发布

SFwords

最新推荐文章于 2022-06-02 00:49:55 发布

阅读量318

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/SFwords/article/details/80021319

版权

学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html> 
 
  <html 
  lang= 
  "en" 
  > 
 
  <head> 
 
  <meta 
  charset= 
  "UTF-8" 
  > 
 
  <meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  <meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
  <title>Document 
  </title> 
 
  <script 
  src= 
  "./js/vue.js" 
  > 
  < 
  /script> 
 
  <script 
  src= 
  "https://unpkg.com/vue-router/dist/vue-router.js" 
  > 
  < 
  /script> 
 
  <link 
  rel= 
  "stylesheet" 
  href= 
  "./bootstrap/dist/css/bootstrap.css" 
  > 
 
  <style> 
 
  body { 
 
  background-color: 
  #e8e8e8; 
 
   } 
 
  < 
  /style> 
 
  </head> 
 
  <body> 
 
  <div 
  id= 
  "app" 
  > 
 
  <div 
  class= 
  "row" 
  > 
 
  <div 
  class= 
  " page-item col-xl-8 offset-2" 
  > 
 
  <h2>这只是一个测试！ 
  </h2> 
 
  </div> 
 
  </div> 
 
  <div 
  class= 
  "row" 
  > 
 
  <div 
  class= 
  "col-xl-2 offset-2" 
  > 
 
  <div 
  class= 
  " list-group" 
  > 
 
  <router-link 
  class= 
  "list-group-item" 
  to= 
  "/h5" 
  >H5 
  </router-link> 
 
  <router-link 
  class= 
  "list-group-item" 
  to= 
  "/java" 
  >JAVA 
  </router-link> 
 
  <router-link 
  class= 
  "list-group-item" 
  to= 
  "/android" 
  >Android 
  </router-link> 
 
  </div> 
 
  </div> 
 
  <div 
  class= 
  "col-xl-8" 
  > 
 
  <div 
  class= 
  "panel page-item" 
  > 
 
  <div 
  class= 
  "panel-body" 
  > 
 
  <!-- 路由出口 --> 
 
  <router-view></router-view> 
 
  </div> 
 
  </div> 
 
  </div> 
 
  </div> 
 
  </div> 
 
  <!-- template标签构建法组件 --> 
 
  <template 
  id= 
  "my_h5" 
  > 
 
  <div> 
 
  <h2>h5学院 
  </h2> 
 
  <img 
  src= 
  "./js/01.png" 
  alt= 
  "" 
  > 
 
  <p>这个最好上手！ 
  </p> 
 
  </div> 
 
  </template> 
 
  <template 
  id= 
  "my_java" 
  > 
 
  <div> 
 
  <h2>java学院 
  </h2> 
 
  <img 
  src= 
  "./js/02.png" 
  alt= 
  "" 
  > 
 
  <p>这个是后端语言！ 
  </p> 
 
  </div> 
 
  </template> 
 
  <template 
  id= 
  "my_android" 
  > 
 
  <div> 
 
  <h2>my_android学院 
  </h2> 
 
  <img 
  src= 
  "./js/01.png" 
  alt= 
  "" 
  > 
 
  <p>这个是可以做APP的！ 
  </p> 
 
  </div> 
 
  </template> 
 
  <script> 
 
  // 构建组件 
 
  const 
  my_h5 
  = 
  Vue 
  . 
  extend 
  ({ 
 
  template: 
  '#my_h5' 
 
  }) 
 
  const 
  my_java 
  = 
  Vue 
  . 
  extend 
  ({ 
 
  template: 
  '#my_java' 
 
  }) 
 
  const 
  my_android 
  = 
  Vue 
  . 
  extend 
  ({ 
 
  template: 
  '#my_android' 
 
  }) 
 
  // 定义路由 
 
  const 
  routes 
  = 
  [{ 
 
  path: 
  '/h5' 
  , 
 
  component: 
  my_h5 
 
  }, 
 
  { 
 
  path: 
  '/java' 
  , 
 
  component: 
  my_java 
 
  }, 
 
  { 
 
  path: 
  '/android' 
  , 
 
  component: 
  my_android 
 
  }, 
 
  { 
  // 路由重定向 
 
  path: 
  '*' 
  , 
 
  redirect: 
  '/h5' 
 
  } 
 
  ] 
 
  // 3. 创建 router 实例，然后传 `routes` 配置 
 
  // 你还可以传别的配置参数, 不过先这么简单着吧。 
 
  const 
  router 
  = 
  new 
  VueRouter 
  ({ 
 
  routes 
 
  // （缩写）相当于 routes: routes 
 
  }) 
 
  // 4. 创建和挂载根实例。 
 
  // 记得要通过 router 配置参数注入路由， 
 
  // 从而让整个应用都有路由功能 
 
  const 
  app 
  = 
  new 
  Vue 
  ({ 
 
  router 
 
  }). 
  $mount 
  ( 
  '#app' 
  ) 
 
  < 
  /script> 
 
  </body> 
 
  </html>