详解在vue-cli中使用路由

  • 更新时间:2022-06-23 11:53:15
  • 编辑:糜若珑

1.首先npm中是否有vue-router

一般在vue-cli的时候就已经下载好了依赖包了

2.使用vue的话正常的需要涉及这几个文件

demo/src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '../components/Hello'//首页

import Test from '../components/test'//需要跳转的页面 给组件重新命名

 

Vue.use(Router)

 

export default new Router({

 routes: [

  {//首页

   path: '/',

   name: 'Hello',

   component: Hello

  },

  {//需要跳转的页面

    path:'/test',

    name:'test',

    component:Test//组件名字

  }

 ]

}) 

demo/src/app.vue

<template>

 <div id="app">

  <img src="./assets/logo.png">

  <p>

  <router-link to="/home">home</router-link>//跳转首页

  <router-link to="/test">test</router-link>//跳转新页面

  </p>

  <router-view></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> 



demo/src/main.js

import Vue from 'vue'

import App from './App'

import router from './router'

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

 el: '#app',

 router,

 template: '<App/>',

 components: { App }

}).$mount('#app')//实例挂载到元素中 

两个页面的组件

详解在vue-cli中使用路由

这样的话,基本的路由设置就好了,可以按照正常的npm run dev运行这个项目了

另外还有嵌套 自定义多种路由

具体的路由内容可以查看:https://router.vuejs.org/zh-cn/installation.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

相关教程

  • vue初尝试--项目结构(推荐)

    这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下

    发布时间:2022-04-04

  • 在vue项目中使用layui框架的方法及采坑总结

    这篇文章主要介绍了vue使用layui框架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    发布时间:2019-09-16

  • Vue实现双向绑定的原理以及响应式数据的实例代码

    这篇文章主要介绍了Vue实现双向绑定的原理以及响应式数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-04-10

  • Vue用cmd创建项目具体步骤

    在本篇内容里小编给大家整理了关于Vue用cmd创建项目的方法讲解,有兴趣的朋友们跟着学习下。

    发布时间:2019-12-16

  • 实例分享vue中子组件如何向父组件传递数据

    这篇文章主要介绍了vue中子组件向父组件传递数据的实例代码(实现加减功能) ,需要的朋友可以参考下

    发布时间:2020-03-05

  • vue2全局变量的设置步骤详解

    下面小编就为大家分享一篇vue2 全局变量的设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    发布时间:2019-11-12

  • Vue.js的移动组件库cube-ui用法

    这篇文章主要介绍了基于Vue.js的移动组件库cube-ui,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-04-13

  • mpvue性能优化实战技巧

    这篇文章主要介绍了mpvue性能优化实战技巧(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    发布时间:2020-02-03

  • 详解Vue递归组件+Vuex开发树形组件Tree--递归组件

    这篇文章也是我自己开发的从无到有的过程,所以它可以为你提供一些Tree组件开发的思路,本文重点给大家介绍vue递归组件的简单实现,感兴趣的朋友跟随小编一起看看吧

    发布时间:2020-02-14

用户留言