Vue路由系統 一切分離都是為了更好的結合，本文詳細介紹了前後端分離架構之後，前端如何實現路由控制，即Vue路由系統。 一、VueRouter實現原理 VueRouter的實現原理是根據監控錨點值的改變，從而不斷修改組件內容來實現的，我們來試試不使用VueRouter，自己實現路由控制，如下代碼： ...
Vue路由系統
一切分離都是為了更好的結合，本文詳細介紹了前後端分離架構之後，前端如何實現路由控制，即Vue路由系統。
一、VueRouter實現原理
VueRouter的實現原理是根據監控錨點值的改變，從而不斷修改組件內容來實現的，我們來試試不使用VueRouter，自己實現路由控制，如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<script src="../statics/vue-router.js"></script>
<style>
body {
margin: 0;
}
.login {
width: 100%;
height: 1200px;
background-color: #0FC57C;
}
.register {
width: 100%;
height: 1200px;
background-color: yellow;
}
.home {
width: 100%;
height: 1200px;
background-color: #2aabd2;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<a href="#/home">首頁</a>
<a href="#/login">登錄</a>
<a href="#/register">註冊</a>
</div>
<script>
let oDiv = document.getElementById("app");
window.onhashchange = function () {
console.log(location.hash);
// vue-router的實現原理是根據錨點值的改變
// 對頁面進行切換
switch (location.hash) {
case "#/login":
oDiv.innerHTML = `<h3 class='login'>這是登錄頁面</h3>`;
break;
case "#/register":
oDiv.innerHTML = `<h3 class='register'>這是註冊頁面</h3>`;
break;
default:
oDiv.innerHTML = `<h3 class='home'>這是首頁</h3>`;
break;
}
};
</script>
</body>
</html>可以看到，通過監控錨點值的改變，頁面上面的內容可以跳轉到我們需要顯示的頁面。
二、VueRouter安裝使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>這是首頁</div>
`
};
let Login = {
template: `
<div>登錄頁面</div>
`
};
let Register = {
template: `
<div>註冊頁面</div>
`
};
let App = {
template: `
<div>
<router-link to="/home">首頁</router-link>
<router-link to="/login">登錄</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
`
};
// 2. 在vue中中使用vue-router對象
Vue.use(VueRouter);
// 3. 創建一個vue-router對象
let router = new VueRouter({
// 此處要特別註意是routes，不是routers
routes: [
{
path: '/home',
component: Home,
},
{
path: "/login",
component: Login
},
{
path: "/register",
component: Register,
}
]
});
// 4. 在vue實例中使用新創建的vue-router對象
new Vue({
el: "#app",
template: `<app></app>`,
components: {
"app": App,
},
router: router
})
</script>
</body>
</html>三、VueRouter命名路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Login = {
template: `
<div>登錄頁面</div>
`
};
let Register = {
template: `
<div>註冊頁面</div>
`
};
let App = {
template: `
<div>
<router-link :to="{ name: 'login'}">登錄</router-link>
<router-link :to="{ name: 'register'}">註冊</router-link>
<router-view></router-view>
</div>
`
};
// 在vue中中使用vue-router對象
Vue.use(VueRouter);
// 創建一個vue-router對象
let router = new VueRouter({
// 此處要特別註意是routes，不是routers
routes: [
{
name: 'login',
path: "/login",
component: Login
},
{
name: 'register',
path: "/register",
component: Register,
}
]
});
// 在vue實例中使用新創建的vue-router對象
new Vue({
el: "#app",
template: `<app></app>`,
components: {
"app": App,
},
router: router
})
</script>
</body>
</html>此外，還有另一種命名路由方式，如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let App = {
template: `
<div>
<router-link to="/">首頁</router-link>
<router-view name="header"></router-view>
<router-view name="footer"></router-view>
</div>
`
};
Vue.use(VueRouter);
let router = new VueRouter({
routes: [
{
path: '/',
components: {
header: {
template: `
<div>頭部</div>
`
},
footer: {
template: `
<div>底部</div>
`
}
}
}
]
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App
}
})
</script>
</body>
</html>四、VueRouter路由中使用參數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 常用的兩種查詢方式
// xxx.html/user/1
// xxx.html/user/id=1
let userParams = {
template: `
<div>用戶一信息</div>
`
};
let userQuery = {
template: `
<div>用戶二信息</div>
`
};
let App = {
template: `
<div>
<router-link :to="{ name: 'userParams', params: { userId: 1} }">用戶一</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">用戶二</router-link>
<router-view></router-view>
</div>
`,
};
// 在vue中使用vue-router
Vue.use(VueRouter);
// 創建一個VueRouter對象
let router = new VueRouter({
routes: [
{
name: 'userParams',
path: '/users/:userId',
component: userParams
},
{
name: 'userQuery',
path: '/users',
component: userQuery,
}
]
});
// 在vue中使用vue-router
new Vue({
el: "#app",
template: `<app></app>`,
components: {
'app': App,
},
router: router
})
</script>
</body>
</html>五、VueRouter參數實現原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 常用的兩種查詢方式
// xxx.html/user/1
// xxx.html/user/id=1
let userParams = {
template: `
<div>用戶一信息</div>
`,
created () {
console.log('this: ', this);
console.log(this.$route);
console.log(this.$route.params.userId);
}
};
let userQuery = {
template: `
<div>用戶二信息</div>
`,
created () {
console.log(this.$route);
console.log(this.$route.query.userId);
}
};
let App = {
template: `
<div>
<router-link :to="{ name: 'userParams', params: { userId: 1} }">用戶一</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">用戶二</router-link>
<router-view></router-view>
</div>
`,
};
// 在vue中使用vue-router
Vue.use(VueRouter);
// 創建一個VueRouter對象
let router = new VueRouter({
routes: [
{
name: 'userParams',
path: '/users/:userId',
component: userParams
},
{
name: 'userQuery',
path: '/users',
component: userQuery,
}
]
});
// 在vue中使用vue-router
new Vue({
el: "#app",
template: `<app></app>`,
components: {
'app': App,
},
router: router,
created () {
console.log('this: ', this);
console.log(this.$route);
}
})
</script>
</body>
</html>六、VueRouter子路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
width: 500px;
height: 500px;
background-color: #0FC57C;
}
.courses {
width: 500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div class="home">這是首頁</div>
`
};
let Courses = {
template: `
<div class="courses">課程頁面
<div class="details">
<router-link to="details">課程詳情</router-link>
<router-link to="students">學員故事</router-link>
<router-view></router-view>
</div>
</div>
`
};
let Details = {
template: `
<div>課程詳情頁</div>
`
};
let Students = {
template: `
<div>學員故事</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首頁</router-link>
<router-link to="/courses">課程頁面</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/courses',
component: Courses,
children: [
{
path: 'details',
component: Details,
},
{
path: 'students',
component: Students
}
]
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>七、VueRouter子路由append
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
width: 500px;
height: 500px;
background-color: #0FC57C;
}
.courses {
width: 500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div class="home">這是首頁</div>
`
};
let Courses = {
template: `
<div class="courses">課程頁面
<div class="details">
<router-link to="details" append>課程詳情</router-link>
<router-link to="students">學員故事</router-link>
<router-view></router-view>
</div>
</div>
`
};
let Details = {
template: `
<div>課程詳情頁</div>
`
};
let Students = {
template: `
<div>學員故事</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首頁</router-link>
<router-link to="/courses">課程頁面</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/courses',
component: Courses,
children: [
{
path: 'details',
component: Details,
},
{
path: 'students',
component: Students
}
]
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>使用以上方式，路徑是寫死在屬性中的，所以子路徑會不斷的append到最後，導致訪問不到相應頁面。可以採用另一種，動態綁定屬性，如下代碼所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<script src="../statics/vue-router.js"></script>
<style>
body {
margin: 0;
}
.all {
width: 500px;
height: 500px;
}
.home {
background-color: #2aabd2;
}
.login {
background-color: #7acce4;
}
.register {
background-color: #4cae4c;
}
.courses {
background-color: #0FC57C;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
Vue.use(VueRouter);
let Home = {
template: `
<div class="home all">
<h1>這是首頁頁面</h1>
</div>
`
};
let Login = {
template: `
<div class="login all">
<h1>這是登錄頁面</h1>
</div>
`
};
let Register = {
template: `
<div class="register all">
<h1>這是註冊頁面</h1>
</div>
`
};
let Courses = {
template: `
<div class="courses all">
<h1>這是課程頁面</h1>
<router-link :to="{ name: 'lightcourses' }" append>輕課</router-link>
<router-link :to="{ name: 'degreecourses' }">學位課</router-link>
<router-view><router-view>
</div>
`
};
let LightCourses = {
template: `
<div>
<h1>這是學位課程頁面</h1>
</div>
`
};
let DegreeCourses = {
template: `
<div>
<h1>這是輕課課程頁面</h1>
</div>
`
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首頁</router-link>
<router-link :to="{ name: 'login' }">登錄</router-link>
<router-link :to="{ name: 'register' }">註冊</router-link>
<router-link :to="{ name: 'courses' }">課程</router-link>
<router-view><router-view>
</div>
`,
};
let routes = [
{
name: 'home',
path: '/home',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register
},
{
name: 'courses',
path: '/courses',
component: Courses,
children: [
{
name: 'lightcourses',
path: 'lightcourses',
component: LightCourses
},
{
name: 'degreecourses',
path: 'degreecourses',
component: DegreeCourses
}
]
}
];
let router = new VueRouter({
routes: routes,
mode: 'history',
});
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App,
},
router: router,
})
</script>
</body>
</html>註意，必須使用name查找組件和路徑的對應關係，而不能使用path。
八、VueRouter子路由非append
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
width: 500px;
height: 500px;
background-color: #0FC57C;
}
.courses {
width: 500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div class="home">這是首頁</div>
`
};
let Courses = {
template: `
<div class="courses">課程頁面
<div class="details">
<router-link to="/courses/details">課程詳情</router-link>
<router-link to="/courses/students">學員故事</router-link>
<router-view></router-view>
</div>
</div>
`
};
let Details = {
template: `
<div>課程詳情頁</div>
`
};
let Students = {
template: `
<div>學員故事</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首頁</router-link>
<router-link to="/courses">課程頁面</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/courses',
component: Courses,
children: [
{
path: '/courses/details',
component: Details,
},
{
path: '/courses/students',
component: Students
}
]
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>九、VueRouter路由重定向redirect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
width: 500px;
height: 500px;
background-color: #0FC57C;
}
.login {
width: 500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div class="home">這是首頁</div>
`
};
let Login = {
template: `
<div class="login">這是登錄頁面</div>
`
};
let Details = {
template: `
<div>課程詳情頁</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首頁</router-link>
<router-link to="/login">登錄頁面</router-link>
<router-link to="/details">課程詳情頁</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/login',
component: Login,
},
{
path: '/details',
redirect: '/login',
component: Details
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>十、VueRouter手動路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
width: 500px;
height: 500px;
background-color: #0FC57C;
}
.details {
width: 500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div>
<div class="home">這是首頁</div>
</div>
`,
};
let Details = {
template: `
<div class="details">課程詳情頁</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首頁</router-link>
<button @click="myClick">點擊跳轉到課程詳情頁面</button>
<router-view></router-view>
</div>
`,
methods: {
myClick: function () {
this.$router.push('/details');
}
}
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/details',
component: Details
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>十一、VueRouter路由鉤子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
width: 500px;
height: 500px;
background-color: #0FC57C;
}
.login {
width: 500px;
height: 500px;
background-color: #5b80b2;
}
.user {
width: 500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let homePage = {
template: `
<div class="home"><h3>這是首頁</h3></div>
`
};
let loginPage = {
template: `
<div class="login"><h3>這是登錄頁面</h3></div>
`
};
let userPage = {
template: `
<div class="user"><h3>這是用戶管理頁面</h3></div>
`
};
let App = {
template: `
<div>
<router-link to="/">首頁</router-link>
<router-link to="/login">登錄</router-link>
<router-link to="userinfo">用戶</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: homePage
},
{
path: '/login',
component: loginPage,
},
{
path: '/userinfo',
component: userPage,
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
router.beforeEach(function (to, from, next) {
// 如果next的參數是具體的路徑，則跳轉到該路徑
// 如果next沒有被傳入參數，則什麼都不做，保持原來不變
// 如果next的參數是一個error實例，跳轉終止
next();
});
new Vue({
el: "#app",
template: `<app></app>`,
components: {
'app': App
},
router: router,
})
</script>
</body>
</html>十二、VueRouter在路徑中去掉#號
在創建路由實例時，我們可以新增一個屬性，該屬性用來去掉在路徑中顯示#號，它的屬性名為mode，屬性值為’history’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<script src="../statics/vue-router.js"></script>
<style>
body {
margin: 0;
}
.box {
line-height: 100px;
text-align: center;
}
.home {
background-color: #2aabd2;
width: 500px;
height: 500px;
}
.login {
background-color: #2b9b2d;
width: 500px;
height: 500px;
}
.register {
background-color: #4cae4c;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
Vue.use(VueRouter);
let Home = {
template: `
<div class="home">
<h1>這是首頁頁面</h1>
</div>
`
};
let Login = {
template: `
<div class="login">
<h1>這是登錄頁面</h1>
</div>
`
};
let Register = {
template: `
<div class="register">
<h1>這是註冊頁面</h1>
</div>
`
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首頁</router-link>
<router-link :to="{ name: 'login' }">登錄</router-link>
<router-link :to="{ name: 'register' }">註冊</router-link>
<router-view><router-view>
</div>
`,
};
let routes = [
{
name: 'home',
path: '/home',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register
}
];
let router = new VueRouter({
routes: routes,
mode: 'history',
});
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App,
},
router: router,
})
</script>
</body>
</html>
