Vue实现简单路由跳转

拼搏现实的明天。 2022-01-11 05:25 411阅读 0赞
1. 新建一个项目
2. 在components中新建一个文件 这里是test1.vue，内容如下
  1. <template>
  2.     <div>this is 2</div>
  3. </template>
  4. <script>
  5. export default {
  6.     name:'test1'
  7. }
  8. </script>
3. 在router—>index.js中注册 test1.vue组件 —内容如下（整个文件）
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import test1 from '@/components/test1'
  5. Vue.use(Router)
  7. export default new Router({
  8.   routes: [
  9.     {
  10.       path: '/',
  11.       name: 'HelloWorld',
  12.       component: HelloWorld
  13.     },{
  14.       path: '/to2',
  15.       name: 'test1',
  16.       component: test1
  17.   }
  19.   ]
  20. })
4. 清空HelloWorld.vue文件原内容，输入如下内容
  1. <template>
  2.  <div>
  3.   this is 1
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'HelloWorld'
  10. }
  11. </script>
效果图

" class="reference-link">在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，411人围观）

还没有评论，来说两句吧...

相关阅读

    相关 【Vue】路由跳转

    [【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法： 实践： 例如下面的页面，要求点详情跳转到详情页。 ![在这里

    悠悠悠悠/ 0 赞/ 594 阅读

    相关 【Vue】路由跳转

    路由跳转有几种方式，我用的最多的是$router.push的方法： 实践： 例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

    清疚清疚/ 0 赞/ 561 阅读