使用vue-router实现简单的页面跳转

最新推荐文章于 2024-07-27 11:33:23 发布

前方太黑暗

最新推荐文章于 2024-07-27 11:33:23 发布

阅读量3.2k

点赞数 3

分类专栏： vue 文章标签： vue-router实现页面跳转 vue-router修改默认active名字

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/102401180

版权

vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

身为后端开发，和管理系统打交道是必不可少的，而我们的管理系统一般都是在一个页面展示多个菜单的内容，俗称单页面

举个例子：

点击不同的菜单右侧显示不同的内容，那么使用vue如何实现呢

首先我们需要引入 vue-router 文档链接（https://router.vuejs.org/zh/api/）

先实现一个hello world 非常简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .active{
          font-size:20px;
          color:red
        }
    </style>
</head>
<body>
<div id="rou">
    <p>
		<router-link to="/home">首页</router-link>
		<router-link to="/user">账户管理</router-link>
	</p>
	<router-view></router-view>
</div>
<script>
	const home = { template: '<div>welcome 首页</div>' }
	
	const user = { template: '<div>账户管理页面</div>' }

	const routes = [
	  { path: '/home', component: home },
	  { path: '/user', component: user },
	  { path: '*', redirect: '/home'},//重定向
	]

	const router = new VueRouter({
	  routes: routes,
      linkActiveClass:'active' // 修改选中的css  默认为router-link-active
	})

    var aj = new Vue({
        el:'#rou',
		router:router
    })
 
</script>
</body>
</html>

注意选中链接默认是给了router-link-active，但是这个class并没有设置样式，我们可以自己修改，如果我们感觉这个class名字太长了我们也可以通过linkActiveClass来修改class的名字。还有任务导航都应该有一个重定向的操作，比如输入错误的url我们要给他跳到首页上，这就使用了redirect来重定向。。。。