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>