Vue路由是一个前端独立的路由，他可以只在前端渲染。通过路由的切换来调用不同的组件展示。接下来看一个经典的单页面路由。
TIP：使用路由必须要在网站环境下，否则路由无法使用。
孤狼 | 
2022-07-31 22:58:12 | 
1156°C | 
0条评论 ]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue路由</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 设置3种不同的组件
const main = { template: '<p>主页</p>' }
const list = { template: '<p>列表页</p>' }
const content = { template: '<p>内容页</p>' }
//配置路由表
const routes = {
'/': main,
'/l': list,
'/c':content
}
//初始化vue实例
new Vue({
el: '#app',
data: {
//获取当前页面地址 ('/','/l'等)
currentRoute: window.location.pathname
},
computed: {
//返回当前页面路径在路由表中对应的组件
ViewComponent () {
return routes[this.currentRoute]
}
},
//页面路径修改时,触发对应函数
//render渲染函数接收一个 createElement 方法(缩写h)作为第一个参数用来创建 VNode
//Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
render (h) { return h(this.ViewComponent) }
})
</script>
</body>
</html>
赞赏一个鸡腿
