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

身为后端开发，和管理系统打交道是必不可少的，而我们的管理系统一般都是在一个页面展示多个菜单的内容，俗称单页面举个例子：点击不同的菜单右侧显示不同的内容，那么使用vue如何实现呢首先我们需要引入vue-router 文档链接（https://router.vuejs.org/zh/api/）先实现一个hello world 非常简单<!DOCTYPE htm...

前方太黑暗

3279人浏览 · 2019-10-08 18:14:55

前方太黑暗 · 2019-10-08 18:14:55 发布

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

举个例子：

点击不同的菜单右侧显示不同的内容，那么使用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来重定向。。。。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^