溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
（1）傳統的開發方式 url改變后，立馬發送請求，響應整個頁面，有可能資源過多，傳統開發會讓前端的頁面出現 “白屏” 用戶體驗不好
（2）SPA 單頁面應用 ： 錨點值的改變后，不會立刻發送請求，而是在某個合適的時機，發送ajax請求，局部改變頁面中的數據,頁面不立刻跳轉用戶體驗好<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
SPA : Single Page Application
前端路由
1.錨點值 監視
2.ajax獲取動態的數據
3.核心點是錨點值的改變
前端中 vue|react|angular 都很適合做單頁面應用
-->
<a href="#/login">登錄頁面</a>
<a href="#/register">注冊頁面</a>
<div id="app">
</div>
<script type="text/javascript">
// onhashchange 事件 url上的錨點數據（#/xxx改變）
var oDiv = document.getElementById('app');
window.onhashchange = function(){
console.log(location.hash);
// 根據不同的錨點值，對頁面不同的切換。
switch (location.hash) {
case '#/login':
oDiv.innerHTML = '<h3>登錄頁面</h3>';
break;
case '#/register':
oDiv.innerHTML = '<h3>注冊頁面</h3>';
break;
default:
// statements_def
break;
}
}
</script>
</body>
</html>
npm init --yes
npm install vue-router --save
它是vue中核心插件
1. 下載vue-router
npm init --yes
npm install vue-router --save
- 引入vue-router的模塊 默認會拋出一個VueRouter對象 另外還有兩個全局的組件router-link 和router-view
2. Vue.use(VueRouter)
3. 創建路由對象<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給咱們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 2.讓Vue使用該VueRouter創建
Vue.use(VueRouter);
var Login = {
template:`
<div>登錄頁面</div>
`
};
var Register = {
template:`
<div>注冊頁面</div>
`
};
// 3.創建一個路由對象
var router = new VueRouter({
// 配置路由對象
routes:[
{
path:'/login',
component:Login
},
{
path:'/register',
component:Register
}
]
});
var App = {
template:`
<div>
<!--router-link默認會被渲染成a標簽 to屬性默認會被渲染成href屬性-->
<router-link to="/login">登錄頁面</router-link>
<router-link to="/register">注冊頁面</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
components:{
App
},
router,
template:`<App />`
});
</script>
</body>
</html>
給當前的配置路由信息對象設置name:'login'屬性
:to = "{name:'login'}"<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給咱們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 2.讓Vue使用該VueRouter創建
Vue.use(VueRouter);
var Login = {
template:`
<div>登錄頁面</div>
`
};
var Register = {
template:`
<div>注冊頁面</div>
`
};
// 3.創建一個路由對象
var router = new VueRouter({
// 配置路由對象
routes:[
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
}
]
});
var App = {
template:`
<div>
<!--router-link默認會被渲染成a標簽 to屬性默認會被渲染成href屬性-->
<router-link :to="{name:'login'}">登錄頁面</router-link>
<router-link :to="{name:'register'}">注冊頁面</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
components:{
App
},
router,
template:`<App />`
});
</script>
</body>
</html>
(1)xxxx.html#/user/1
配置路由對象中
{
path:'/user/:id',
component:User
}
<router-link :to = "{name:'user',params:{id:1}}"></router-link>
(2)xxxx.html#/user?userId = 1
{
path:'/user'
}
<router-link :to = "{name:'user',query:{id:1}}"></router-link>
在組件內部通過this.$route 獲取路由信息對象<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給咱們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 路由范式
// (1)xxxx.html#/user/1 params
// (2)xxxx.html#/user?userId = 2 query
// 2.讓Vue使用該VueRouter創建
Vue.use(VueRouter);
var UserParams = {
template:`
<div>我是用戶1</div>
`,
created(){
console.log("用戶1this.$route--------",this.$route);
console.log("用戶1this.$route.params.userId--------",this.$route.params.userId);
// 發送ajax請求
console.log("this.$router--------",this.$router);
}
};
var UserQuery = {
template:`
<div>我是用戶2</div>
`,
created(){
console.log("用戶2this.$route--------",this.$route);
// 發送ajax請求
console.log("用戶2this.$router--------",this.$router);
}
};
// 3.創建一個路由對象
var router = new VueRouter({
// 配置路由對象
routes:[
{
// 動態的路由參數 以冒號開頭
path:'/user/:userId',
name:'userp',
component:UserParams
},
{
path:'/user',
name:'userq',
component:UserQuery
}
]
});
var App = {
template:`
<div>
<!--router-link默認會被渲染成a標簽 to屬性默認會被渲染成href屬性-->
<router-link :to="{name:'userp',params:{userId:1}}">用戶1</router-link>
<router-link :to="{name:'userq',query:{userId:2}}">用戶2</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
components:{
App
},
router,
template:`<App />`
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給咱們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 路由范式
// (1)xxxx.html#/user/1 params
// (2)xxxx.html#/user?userId = 2 query
// 2.讓Vue使用該VueRouter創建
Vue.use(VueRouter);
var UserParams = {
template:`
<div>我是用戶1</div>
`,
created(){
console.log("用戶1this.$route--------",this.$route);
console.log("用戶1this.$route.params.userId--------",this.$route.params.userId);
// 發送ajax請求
console.log("this.$router--------",this.$router);
}
};
var UserQuery = {
template:`
<div>我是用戶2</div>
`,
created(){
console.log("用戶2this.$route--------",this.$route);
// 發送ajax請求
console.log("用戶2this.$router--------",this.$router);
}
};
// 3.創建一個路由對象
var router = new VueRouter({
// 配置路由對象
routes:[
{
// 動態的路由參數 以冒號開頭
path:'/user/:userId',
name:'userp',
component:UserParams
},
{
path:'/user',
name:'userq',
component:UserQuery
}
]
});
var App = {
template:`
<div>
<button @click = 'paramsHandler'>用戶1</button>
<button @click = 'queryHandler'>用戶2</button>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`,
methods:{
paramsHandler(){
// 編程式導航
this.$router.push({ name: 'userp', params: { userId: 123 }})
},
queryHandler(){
this.$router.push({ name: 'userq', query: { userId: 321 }})
}
}
};
new Vue({
el:'#app',
components:{
App
},
router,
template:`<App />`
});
</script>
</body>
</html>
一個router-view 嵌套另外一個router-view<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給咱們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 嵌套路由：
// 需求：進入首頁之后 點擊 音樂 /home/music 電影 /home/movie
Vue.use(VueRouter);
var Home = {
template: `
<div>
<br />
<router-link to = '/home/music'>音樂</router-link>
<router-link to = '/home/movie'>電影</router-link>
<!--子路由組件的出口-->
<router-view></router-view>
</div>
`
};
var Music = {
template: `
<div>我是音樂</div>
`
};
var Movie = {
template: `
<div>我是電影</div>
`
};
// 3.創建一個路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{
path: '/',
// redirect:{name:'home'}
redirect: '/home'
},
{
// 動態的路由參數 以冒號開頭
path: '/home',
//這里不能使用別名，會報警告
// name:'home',
component: Home,
children: [
// 動態路由匹配 表示你的子組件中的結構是不同的
// 當訪問/home時，Home組件的出口是不會渲染任何內容，這是因為沒有匹配到合適的子路由
{
path: '',
component: Music
},
{
path: 'music',
component: Music,
},
{
path: 'movie',
component: Movie
}
]
}
]
});
var App = {
template: `
<div>
<router-link to = "/home">首頁</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
// 共同的子組件
var ComDesc = {
data() {
return {
msg: ''
}
},
template: `
<div>
我是{{msg}}
</div>
`,
created() {
// alert(1);
this.msg = 'andorid';
},
watch: {
// 提醒一下，當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。
//因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。
'$route' (to, from) {
// 對路由變化作出響應...
console.log("to------------------", to);
console.log("from------------------", from);
this.msg = to.params.id;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給咱們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 嵌套路由：
// 需求：進入首頁之后 點擊 音樂 /home/music 電影 /home/movie
Vue.use(VueRouter);
var Timeline = {
template: `
<div>
<router-link :to = "{name:'comDesc',params:{id:'android'}}">Android</router-link>
<router-link :to = "{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
<router-view></router-view>
</div>
`
};
var Pins = {
template: `
<div>
我是沸點
</div>
`
};
// 共同的子組件
var ComDesc = {
data() {
return {
msg: ''
}
},
template: `
<div>
我是{{msg}}
</div>
`,
created() {
// alert(1);
this.msg = 'andorid';
},
watch: {
// 提醒一下，當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。
//因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。
'$route' (to, from) {
// 對路由變化作出響應...
console.log("to------------------", to);
console.log("from------------------", from);
this.msg = to.params.id;
}
}
}
// 3.創建一個路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{
// 動態的路由參數 以冒號開頭
path: '/timeline',
component: Timeline,
children: [{
path: "",
component: ComDesc
},
{
path: '/timelin/:id',
name: 'comDesc',
component: ComDesc
}
]
},
{
// 動態的路由參數 以冒號開頭
path: '/pins',
name: 'pins',
component: Pins,
}
]
});
var App = {
template: `
<div>
<router-link to = "/timeline">首頁</router-link>
<router-link to = "/pins">沸點</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
<keep-alive>
<router-view></router-view>
</keep-alive>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給咱們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 嵌套路由：
// 需求：進入首頁之后 點擊 音樂 /home/music 電影 /home/movie
Vue.use(VueRouter);
var Timeline = {
template: `
<div>
我是首頁
</div>
`,
created() {
console.log('首頁組件創建了');
},
mounted() {
console.log('首頁組件DOM加載了')
},
destroyed() {
console.log('首頁銷毀了');
}
};
var Pins = {
template: `
<div>
<h4 @click = 'clickHandler'> 我是沸點</h4>
</div>
`,
methods: {
clickHandler(e) {
e.target.style.color = 'red';
}
},
created() {
console.log('沸點組件創建了');
},
mounted() {
console.log('沸點組件DOM加載了')
},
destroyed() {
console.log('沸點銷毀了');
}
};
// 3.創建一個路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{
// 動態的路由參數 以冒號開頭
path: '/timeline',
component: Timeline
},
{
// 動態的路由參數 以冒號開頭
path: '/pins',
name: 'pins',
component: Pins,
}
]
});
var App = {
template: `
<div>
<router-link to = "/timeline">首頁</router-link>
<router-link to = "/pins">沸點</router-link>
<!--路由組件的出口-->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
`
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給咱們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 嵌套路由：
// 需求：進入首頁之后 點擊 音樂 /home/music 電影 /home/movie
Vue.use(VueRouter);
// 導航欄上 有首頁 智能題庫 登錄退出 四個按鈕
// 用戶訪問首頁時 看到的是首頁的內容
// 1.當用戶訪問智能題庫時，此時我們檢測用戶是否有權限訪問該智能題庫的內容，
// 如果沒有 檢測用戶是否登錄過，如果沒有，則跳轉登錄頁面，登錄完成之后。
// 在localStroage中通存儲該用戶的用戶名和密碼，并且立刻跳轉到智能題庫頁面
// 2.當用戶點擊黜退，該用戶直接刪除
var Home = {
template: `
<div>
我是首頁
</div>
`
};
var Questionbank = {
template: `
<div>
我是題庫
</div>
`
};
// 登錄組件
var Login = {
data(){
return {
name:'',
pwd:''
}
},
template:`
<div>
<input type="text" v-model = 'name' />
<input type="text" v-model = 'pwd' />
<input type="button" value = '登錄' @click = 'loginHandler'/>
</div>
`,
methods:{
loginHandler(){
alert(1);
// 要登錄了
// 存儲用戶名會被密碼 保存到 localStorage 然后跳轉相應的路由（智能題庫）
localStorage.setItem('user', {name:this.name,pwd:this.pwd});
// 編程式導航
this.$router.push({name:'questionbank'});
}
}
};
// 3.創建一個路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{
// 動態的路由參數 以冒號開頭
path: '/home',
component: Home
},
{
// 動態的路由參數 以冒號開頭
path: '/questionbank',
name: 'questionbank',
component: Questionbank,
// 給未來的路由 做權限控制
meta:{
// 表明訪問該組件時需要登錄
auth: true
}
},
{
path:'/login',
component:Login
}
]
});
// 全局的導航守衛
router.beforeEach(function(to,from,next){
console.log(to.meta.auth);
console.log(from);
// 如果不調用next 那么頁面會卡主
if(to.meta.auth){
// 用戶點擊了智能題庫的導航 該用戶未登錄，需要登錄判斷
if (localStorage.getItem('user')) {
// 不為空 放行
next()
}else{
// 為空 進入登錄頁面
next({path:'/login'});
}
}else{
// 直接放行
next();
}
});
var App = {
template: `
<div>
<router-link to = "/home">首頁</router-link>
<router-link to = "/questionbank">智能題庫</router-link>
<router-link to = '/login'>登錄</router-link>
<a href="javascript:void(0)" @click = 'clear'>退出</a>
<!--路由組件的出口-->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
`,
methods:{
clear(){
// 退出
localStorage.removeItem('user');
this.$router.push('/login');
}
}
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
