vue-路由-基本使用

最新推荐文章于 2024-09-26 01:44:27 发布

原创最新推荐文章于 2024-09-26 01:44:27 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-路由-基本使用

vue 专栏收录该内容

20 篇文章

订阅专栏

vue-router官网
   https://router.vuejs.org/installation.html
URL中的hash（井号）
   http://www.cnblogs.com/joyho/articles/4430148.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/vue.js"></script>
		<!-- 1.安装vue-router -->
        <script src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<p>	
				<a href="#/login">登录</a>	
				<a href="#/register">注册</a>
				<hr>	
				<router-link to="/login">登录页面</router-link>
				<router-link to="/register">注册页面</router-link>
			</p>
			<!-- vue-router提供的元素，用来当作占位符，路由匹配到的组件展示区 -->
			<router-view></router-view>
		</div>
		<script>
			const login = { template: '<div>登录组件</div>' }
			const register = { template: '<div>注册组件</div>' }
			//2.创建路由对象，导入包vue-router之后，window全局对象中就有一个VueRouter构造函数，
			//new 路由对象的时候，可以传递配置对象
			var routerObj = new VueRouter({
				//route表示路由匹配规则
				routes:[
					{path:'/login',component:login},
					{path:'/register',component:register}
				]
			})
			var app = new Vue({
				el:"#app",
				data:function(){
					return {
						
					}
				},
				methods:{},
				router:routerObj//3.将路由注册到vue实例上，用来监听url的变化，匹配路由，展示对应组件
			});
		</script>
	</body>
</html>