vue學習之六路由系統
1、vueRouter實現原理
VueRouter的實現原理是根據監控錨點值的改變，從而不斷修改組件內容來實現的，咱們來試試不使用VueRouter，本身實現路由控制，以下代碼：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a href="#/login">登陸</a>
<a href="#/register">註冊</a>
<a href="#/home">首頁</a>
</div>
<script>
let oDiv = document.getElementById("app");
window.onhashchange = function () {
console.log(location.hash);
switch (location.hash){
case "#/login":
oDiv.innerHTML = `<h1>登陸</h1>`;
break;
case "#/register":
oDiv.innerHTML = `<h1>註冊</h1>`;
break;
case "#/home":
oDiv.innerHTML = `<h1>首頁</h1>`;
break;
default:
oDiv.innerHTML = `<h1>首頁</h1>`;
break;
}
}
</script>
</body>
</html>
2、vue路由的安裝使用
2.1下載vue-route.js
https://unpkg.com/vue-router/dist/vue-router.jsvue
2.2引入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>
3、VueRouter知識點
3.1命名路由
<!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>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>這是首頁頁面</div>
`
};
let Login = {
template: `
<div>這是登陸頁面</div>
`
};
let Register = {
template: `
<div>這是註冊頁面</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
}
]
});
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>
`,
};
Vue.use(VueRouter);
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
},
router: router
})
</script>
</body>
</html>
3.2路由參數
<!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>
</head>
<body>
<div id="app">
</div>
<script>
// xxx.html/user/1
// xxx.html/user/userid=2
let userParams = {
template: `
<div>用戶一信息概要</div>
`
};
let userQuery = {
template: `
<div>用戶二信息概要</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'userParams',
path: '/userParams/:userId',
component: userParams,
},
{
name: 'userQuery',
path: '/userParams',
component: userQuery,
}
]
});
let App = {
template: `
<div>
<router-link :to="{ name: 'userParams', params: { userId: 1} }">Get User1</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2} }">Get User2</router-link>
<router-view></router-view>
</div>
`,
};
Vue.use(VueRouter);
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
},
router: router
})
</script>
</body>
</html>
3.3路由參數實現原理
<!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);
// 此時能夠發送ajax請求到後端獲取數據
}
};
let userQuery = {
template: `
<div>用戶二信息</div>
`,
created () {
console.log(this.$route);
console.log(this.$route.query.userId);
// 此時能夠發送ajax請求到後端獲取數據
}
};
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>
3.4子路由
<!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>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>首頁</div>
`,
};
let Linux = {
template: `
<div>這是linux免費課</div>
`
};
let Go = {
template: `
<div>這是go免費課</div>
`
};
let FreeCourses = {
template: `
<div>
<div>免費課程</div>
<router-link to="linux">Linux</router-link>
<router-link to="go">Go</router-link>
<router-view></router-view>
</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
},
{
name: 'freecourses',
path: '/freecourses',
component: FreeCourses,
children: [
{
path: 'linux',
component: Linux,
},
{
path: 'go',
component: Go,
}
]
}
]
});
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首頁</router-link>
<router-link :to="{ name: 'freecourses' }">免費課</router-link>
<router-view></router-view>
</div>
`,
};
Vue.use(VueRouter);
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
},
router: router,
})
</script>
</body>
</html>
子路由appendlinux
<!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>
VueRouter子路由非appendajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
width: 500px;
height: 500px;
}
.courses {
width: 500px;
height: 500px;
}
</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>
3.5redirect（重定向）
<!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>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>首頁</div>
`,
};
let Login = {
template: `
<div>這是登陸頁面</div>
`
};
let PayPage = {
template: `
<div>這是支付頁面</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/paypage',
redirect: '/login',
component: PayPage
}
]
});
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首頁</router-link>
<router-link :to="{ name: 'login' }">登陸</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`,
};
Vue.use(VueRouter);
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
},
router: router,
})
</script>
</body>
</html>
3.6手動路由
<!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>
3.7路由鉤子
<!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>
3.8路由鉤子實現登錄
<!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">
<router-link to="/userinfo/userInt">自我介紹</router-link>
<router-link to="/userinfo/userStudy">學習中心</router-link>
<router-view></router-view>
<h3>這是用戶管理頁面</h3>
</div>
`
};
let userIntr = {
template: `
<div>自我介紹頁面</div>
`
};
let userStudy = {
template: `
<div>學習中心</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',
// meta對象裏面的屬性能夠自定義, 都會加載到route實例中
meta: { required_login: true },
component: userPage,
children: [
{
path: '/userinfo/userIntr',
meta: { required_login: true },
component: userIntr
},
{
path: '/userinfo/userStudy',
meta: { required_login: true },
component: userStudy,
}
]
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
router.beforeEach(function (to, from, next) {
// 若是next的參數是具體的路徑，則跳轉到該路徑
// 若是next沒有被傳入參數，則什麼都不作，保持原來不變
// 若是next的參數是一個error實例，跳轉終止
if ( to.meta.required_login ) {
next('/login');
} else {
next();
}
});
new Vue({
el: "#app",
template: `<app></app>`,
components: {
'app': App
},
router: router,
})
</script>
</body>
</html>
相關文章
- 1. Symfony2 學習筆記之系統路由
- 2. Vue學習筆記之 路由路徑
- 3. vue路由學習
- 4. vue學習七：vue路由
- 5. Vue路由,學習路徑
- 6. 10.3 Vue 路由系統
- 7. Vue路由中的子路由學習
- 8. 思科路由器ios系統學習(六)實驗：靜態路由
- 9. vue學習記錄③（路由）
- 10. vue學習路由嵌套
- 更多相關文章...
- • 操作系統（OS）平臺 統計 - 瀏覽器信息
- • 系統定義的TypeHandler - MyBatis教程
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Symfony2 學習筆記之系統路由
- 2. Vue學習筆記之 路由路徑
- 3. vue路由學習
- 4. vue學習七：vue路由
- 5. Vue路由,學習路徑
- 6. 10.3 Vue 路由系統
- 7. Vue路由中的子路由學習
- 8. 思科路由器ios系統學習(六)實驗：靜態路由
- 9. vue學習記錄③（路由）
- 10. vue學習路由嵌套