路由与无痕浏览

最新推荐文章于 2024-06-19 15:46:35 发布

```

最新推荐文章于 2024-06-19 15:46:35 发布

阅读量55

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/csnbb/article/details/126719460

版权

1.路由与无痕浏览

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/home">首页</router-link>
			<router-link to="/about" replace="">关于</router-link>
			
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		const Home = Vue.extend({
			template: "<div>这是首页内容,展示最新的10篇博客</div>"
		})
		const About = Vue.extend({
			template: "<div>这是关于本站显示内容区域</div>"
		})

		let routes = [{
				path: "/home",
				component: Home
			},
			{
				path: "/about",
				component: About
			}
		]

		const router = new VueRouter({
			routes:routes
		});
		
		new Vue({
			el: "#app",
			router,
			data() {
				return {

				}
			}
		})
	</script>
</html>