Vue-router Vue前端路由

在浏览器中点击多个连接,跳转过多个页面所经过的网页路径就是 路由

前端大部分只是一个静态页面
实现路由功能需要借助后端

但是Vue提供了前端路由的写法

首先

引入Vue文件和Vue-router 文件

<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

创建一个路由对象

const home = {template:"<h1>This is Home</h1>"};
const router = new VueRouter({
	//有一个 routers 属性 用来写 路由的路径和组件
	routes:[// path 里写字符串 路由的路径  
			//  component 路由的组件
		{path:"/home",component:home}
	]
});

使用

<div id="app">
	<router-link to="/home">主页</router-link>
	<router-view></router-view>
</div>

<router-link to="/home">主页</router-link> 是路由跳转连接
<router-view></router-view> 是路由页面展示