vue-router路由的使用

最新推荐文章于 2024-02-27 13:25:27 发布

卡姿兰大长腿

最新推荐文章于 2024-02-27 13:25:27 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/weixin_46382477/article/details/108114879

版权

vue 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>路由基本用法</title>
	<style>
		/* .router-link-active{
			font-size:20px;
			color:#ff7300;
			text-decoration:none;
		} */
		.active{
			font-size:20px;
			color:#ff7300;
			text-decoration:none;
		}
	</style>
	<script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
</head>
<body>
	<div id="itapp">
        <div>
            <!-- a标签 -->
            <router-link to='/home' >主页</router-link>  
            <router-link to='/news'>新闻</router-link> 
        </div>
        <div>
            <!-- 用来显示内容 -->
            <router-view></router-view>
        </div>
	</div>

	<script>
        // 1.定义组件
        var Home={
			template:'<h3>我是主页</h3>'
		}
		var News={
			template:'<h3>我是新闻</h3>'
		}
		
        // 2.配置路由
        var routesAll= [{
            path:'/home',
            component:Home
        },{
            path:'/news',
            component:News
        }];
        //3. 创建路由实例

        var router = new VueRouter({
            routes:routesAll,
            mode:'hash', //history
            linkActiveClass:'active' //当前所处的链接的class
        })

        // 4.将router挂载在vue实例上
		new Vue({
			el:'#itapp',
            // router:router , 
            router  //注入路由
		});
	</script>
</body>
</html>

卡姿兰大长腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router路由的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由基本用法</title> <style> /* .router-link-active{ font-size:20px; color:#ff7300; text-decoration:none; } */ .active{ font-size
复制链接

扫一扫