<!-- 引入對應(yīng)的模塊 -->
<script src="./static/vue.min.js"></script>
<script src="./static/vue-router.js"></script>
<div id="app">
<div>
<!-- 第三步:結(jié)合router-link和router-view調(diào)用 -->
<router-link to="/">首頁</router-link>
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊</router-link>
<router-view></router-view>
</div>
</div>
<script>
// Vue.use(VueRouter); // 這個主要是在vue-cli會用到,這里可以不用填
let Register = { template: '<div><h2>這是注冊頁面</h2></div>'
let Login = { template: '<div><h2>這是登錄頁面</h2></div>'
let Home = { template: '<div><h2>這是主頁面</h2></div>'
// 第一步:實例化router對象路徑和頁面進行綁定對應(yīng)關(guān)系
let router = new VueRouter({
routes: [
{ path: '/', component: Home, },
{ path: '/login', component: Login, },
{ path: '/register', component: Register },
]
})
new Vue({
el: "#app",
// 第二步:vue根實例中注冊router對象
router: router,
})
</script>
<div id="app">
<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>
</div>
<script>
let Register = { template: '<div><h2>這是注冊頁面</h2></div>'
let Login = { template: '<div><h2>這是登錄頁面</h2></div>'
let Home = { template: '<div><h2>這是主頁面</h2></div>'
let router = new VueRouter({
routes: [
{ name: 'home', path: '/', component: Home, },
{ name: 'login', path: '/login', component: Login, },
{ name: 'register', path: '/register', component: Register },
]
})
new Vue({
el: "#app",
router: router,
})
</script>
<div id="app">
<div>
<router-link :to="{ name: 'home' }">主頁面</router-link>
<router-link :to="{ name: 'userparams', params: { userId: 1} }">用戶參數(shù)params</router-link>
<router-link :to="{ name: 'userquery', query: { userId: 2} }">用戶參數(shù) query</router-link>
<router-view></router-view>
</div>
</div>
<script>
Vue.use(VueRouter);
let Home = { template:'<div>這是主頁面</div>' }
let UserParams = { template:'<div>這是用戶params</div>' }
let UserQuery = { template:'<div>這是用戶query</div>' }
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 路由的參數(shù): /user/1 /user/2
name: "userparams",
path: '/user/:userId',
component: UserParams
},
{
// 路由參數(shù): /user?wenqipeng=111
name: 'userquery',
path: '/user',
component: UserQuery
},
]
})
new Vue({
el: "#app",
router: router
})
</script>
<div id="app">
<div>
<router-link to="index">首頁</router-link>
<router-link to="courses">課程頁面</router-link>
<router-view></router-view>
</div>
</div>
<script>
let Index = { template: '<div><h2>這是首頁</h2></div>' }
let Lightcourses = { template: '<div><h2>這是Lightcourses</h2></div>' }
let Degreecourses = { template: '<div><h2>這是Degreecourses</h2></div>' }
let Courses = {
template: `
<div>
<h2>這是課程頁</h2>
<router-link to="lightcourses">輕客</router-link>
<router-link to="degreecourses">學位課</router-link>
<router-view></router-view>
</div>'
`
}
let router = new VueRouter({
routes: [
{
name: 'index',
path: '/index',
component: Index,
},
{
name: 'courses',
path: '/courses',
component: Courses,
children: [ <!-- 路由 -->
{
name: 'lightcourses',
path: 'lightcourses',
component: Lightcourses
},
{
name: 'degreecourses',
path: 'degreecourses',
component: Degreecourses
},
]
},
]
})
new Vue({
el: "#app",
router: router
})
</script>
<div id="app">
<div>
<router-link to="/">首頁</router-link>
<router-link to="/login">登錄</router-link>
<router-link to="/pay">支付</router-link>
<router-view></router-view>
</div>
</div>
<script>
let Index = { template: '<div><h2>這是首頁</h2></div>'}
let Login = { template: '<div><h2>這是登錄頁面</h2></div>'}
let Pay = { template: '<div><h2>這是支付頁面</h2></div>'}
let router = new VueRouter({
routes: [
{
path: '/',
component: Index
},
{
path: '/login',
component: Login
},
{
path: '/pay',
// component: Pay,
redirect: '/login' <!-- 路由重定向 -->
},
]
})
new Vue({
el: "#app",
router: router
})
</script>
<div id="app">
<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>
<script>
let Home = { template: '<div><h2>這是首頁頁面</h2></div>' }
let Login = { template: '<div><h2>這是登錄頁面</h2></div>' }
let Pay = { template: '<div><h2>這是支付頁面</h2></div>' }
let router = new VueRouter({
routes: [
{ name: 'home', path: '/', component: Home, },
{ name: 'login', path: '/login', component: Login, },
{ name: 'pay', path: '/pay', meta: { required_login: true }, component: Pay, },
]
});
// 通過router對象的beforeEach(function(to, from, next))
router.beforeEach(function (to, from, next) {
console.log("to: ", to);
console.log("from: ", from);
console.log("next: ", next);
if ( to.meta.required_login ) {
next('/login');
} else {
next();
}
});
new Vue({
el: "#app",
router: router,
})
</script>
文章題目:VueRouter代碼筆記
地址分享:http://m.rwnh.cn/article28/pdidcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、Google、虛擬主機、品牌網(wǎng)站建設(shè)、App設(shè)計、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)