vue-router配置介绍和使用方法(一)

19 篇文章 3 订阅
11 篇文章 0 订阅



1. vue-router配置流程概述:

1) 准备工作:

  • 建立vue.js项目文件夹,通过cmd命令,完成新建文件夹的相关项目配置(具体操作,请参考“如何进行 node.js的 安装与卸载 ”);
  • vue init webpack 项目文件名
  • 接着按要求配置Project nameauthorvue-router(选择Yes)等等相关参数
  • cd 项目文件名
  • npm install
  • npm run dev

2) 在main.js文件中,进行关于(首页)主体文件(App.vue)的基础配置:

  • 引入Vue主体

  • 引入vue-router主体

  • 引入一个个link路由对象:

    • main.js文件中,创建路由对象并配置路由规则(如下绿色加粗代码):
      	let router = new VueRouter({
      			//routes
      			routes: [
      			//component后面是一个个link对象
      				    {path: '/home',name: 'app',component: Home},
      				    {path: '/hello',name: 'app',component: HelloWorld}
      		  ]
      	});
      	// 注意:单词拼写是: ```component```, 不加 ```s```!
      
  • 安装插件vue-router(挂载属性) ,如右侧代码:Vue.use(VueRouter);

3) 建立相关路由文件夹,及相关路由文件(类如home.vue/about.vue文件)

4) 留坑,在app.vue文件中留坑,如右侧代码: <router-view></router-view>

5) new Vue 启动 ,如右侧代码:new Vue({ •••省略••• });

6) 最后浏览器查看下实时效果。


效果图预览:

这里写图片描述

这里写图片描述


2. 文件目录结构预览:

这里写图片描述


3. 相关代码,参看如下:

main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体(页面初始化显示)
import App from './components/app.vue';
//一个个link对象 - 分类
import Home from './components/home.vue';
import HelloWorld from '@/components/HelloWorld';

//安装插件
Vue.use(VueRouter);//挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
	//routes
	routes: [
	//一个个link对象
    {path: '/home',name: 'app',component: Home},
    {path: '/hello',name: 'app',component: HelloWorld}
  ]
});

/* new Vue 启动 */
new Vue({
  el: '#app',
  render: c => c(App),
  //让vue知道我们的路由规则
  router:router,//可以简写为router
})

app.vue文件

<template>
  <div>
  	<!--留坑,非常重要-->
		<router-view></router-view>		
  </div>
</template>

<script>
	export default {
	  data(){
	  	return{
	  		
	  	}
	  },
	  methods:{
	  	
	  }
	}
</script>

<style scoped>	
</style>
home.vue文件
<template>
	<div>
		我是主页
	</div>
</template>

<script>	
</script>

<style scoped>	
</style>

以上就是关于“vue-router配置介绍和使用方法(一)”的全部内容。

  • 1
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值