1、系统中引入路由js文件，加两个连接，分别到用户管理和用户注册页面
<router-link to="/user">用户列表</router-link> <router-link to="/regis">注册列表</router-link>
2、加入路由占位符
<body>
<div id="app">
<router-link to="/user">用户列表</router-link>
<router-link to="/regis">注册列表</router-link>
<!--路由占位符-->
<router-view></router-view>
</div>
</body>
3、定义好要跳转的组件
const User={ template:"<h1>用户管理页面</h1>" } const Regis={ template:"<h1>注册页面</h1>" }
4、创建路由实例对像
//创建路由实例对象 const router = new VueRouter({ routes:[ {path:'/user',component:User}, {path:'/regis',component:Regis} ] });
5、将中由对象挂到vue对象中去
var vm = new Vue({ el:'#app', data:{ }, methods:{ }, router:router });
6、整个文件的代码最后看起来是这样的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <router-link to="/user">用户列表</router-link> <router-link to="/regis">注册列表</router-link> <!--路由占位符--> <router-view></router-view> </div> </body> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> </html> <script type="text/javascript"> const User={ template:"<h1>用户管理页面</h1>" } const Regis={ template:"<h1>注册页面</h1>" } //创建路由实例对象 const router = new VueRouter({ routes:[ {path:'/user',component:User}, {path:'/regis',component:Regis} ] }); var vm = new Vue({ el:'#app', data:{ }, methods:{ }, router:router }); </script>