Vue Cli脚手架实现简单的路由跳转

最新推荐文章于 2024-03-22 09:20:42 发布

原创最新推荐文章于 2024-03-22 09:20:42 发布 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #cli #路由器

本文介绍了如何使用Vue Cli脚手架搭建简单的路由跳转。首先在src/components创建tryDemo.vue页面，然后在src/router/index.js配置路由，最后在App.vue中使用<router-link>和<router-view>进行页面间的导航。这是一个适合初学者的基础教程，了解更多详情可查阅官方文档或相关资源。

Vue Cli脚手架实现简单的路由跳转

我也是刚入门，所以写的比较小白，如果有错误欢迎指正

下面就是教程：

首先在src/components文件夹下创建一个页面，如下

tryDemo.vue文件

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'tryDemo',
  data () {
    return {
      msg: 'Vue Hello'
    }
  }
}
</script>

<style>
</style>

接着在src/router文件夹下的index.js文件（这个文件是脚手架创建的）引用并设置

index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import tryDemo from '@/components/tryDemo.vue'//引用我们创建的文件

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  //这里设置一个新的路由地址
  {
    path: '/tryDemo',
    name: 'tryDemo',
    component: tryDemo
  }
  ]
})

最后在src文件夹下的App.vue文件使用刚刚的路由并跳转到我们创建的页面

拓展：
<router-link> 组件支持用户在具有路由功能的应用中点击导航，用 to 来指定目标地址，也可以通过 tag 来设置成某些标签，默认是 a 标签。
<router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，中的内容也会发生更改。

App.vue文件

<template>
  <div id="app">
    <router-link to="/">Back</router-link><!-- 点击返回默认主页 -->
    <router-link to="/tryDemo">tryDemo</router-link><!-- 点击跳转我们创建的页面 -->
    <router-view/><!-- 渲染内容 -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>