您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— Vue路由

《和小米一起学Vue.js》— Vue路由

[ 孤狼 | 2022-07-31 22:58:12 | Vue | 1418°C | 0条评论 ]

Vue路由是一个前端独立的路由,他可以只在前端渲染。通过路由的切换来调用不同的组件展示。接下来看一个经典的单页面路由。

TIP:使用路由必须要在网站环境下,否则路由无法使用。  

<!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>



转载请注明出处:http://gl.paea.cn/n.php?n=192
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索