vue-router路由

最新推荐文章于 2025-07-16 14:01:53 发布

siiove

最新推荐文章于 2025-07-16 14:01:53 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46423017/article/details/127195076

Vue 专栏收录该内容

18 篇文章

订阅专栏

1、安装

基于第一个vue-cli进行测试学习；先查看node modules中是否存在vue-router, vue-router是一个插件包，所以我们还是需要用n pm/cn pm来进行安装的

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

2、测试路由

删除第一个vue-cli项目中的没用的东西
components 目录下存放我们自己编写的组件
定义几个自己的组件 Content.vue 、Main.vue、cVzhanshi.vue

Content.vue

<template>
	<div>
		<h1>内容页</h1>
	</div>
</template>

<script>
	export default {
		name:"Content"
	}
</script>

Main.vue

<template>
<div>
    <h1>首页</h1>
    </div>
</template>

<script>
    export default {
        name:"Main"
    }
</script>

gt.vue

<template>
<div>
    <h1>gt</h1>
</div>
</template>

<script>
    export default {
        name:"gt"
    }
</script>

安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js

import Vue from'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Content from '../components/Content'
import Main from '../components/Main'
import cVzhanshi from "../components/gt";
//安装路由
Vue.use(Router) ;
//配置路由
export default new Router({
  routes:[
    {
      //路由路径
      path:'/content',
      //路由名称
      name:'content',
      //跳转到组件
      component:Content
    },{
      //路由路径
      path:'/main',
      //路由名称
      name:'main',
      //跳转到组件
      component:Main
    }
    ,{
      //路由路径
      path:'/gt',
      //路由名称
      name:'main',
      //跳转到组件
      component:cVzhanshi
    }
  ]
});

在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,
  components: { App },
  template: '<App/>'
})

在App.vue中使用路由

<template>
  <div id="app">
    <!--
          router-link：默认会被渲染成一个<a>标签，to属性为指定链接
          router-view：用于渲染路由匹配到的组件
        -->
    <h1>cVzhanshi</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-link to="/gt">gt</router-link>
    <router-view></router-view>
  </div>
</template>

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