day88-Vue基础-路由系统、重定向、钩子函数
原创day88-Vue基础-路由系统、重定向、钩子函数
原创
少年包青菜
修改于 2019-12-18 10:19:46
修改于 2019-12-18 10:19:46
01.VueRouter的实现原理（了解）
<body>
<div id="app"></div>
</body>
<script>
// 固定用法，或者只是为了了解使用过程
// 在url地址栏里面加上 #/ +login、register、
let oDiv = document.getElementById('app'); // DOM方法查找标签
window.onhashchange = function(){
switch (location.hash) {
case '#/login':
oDiv.innerHTML = `<h1>This is login page!</h1>`;
break;
case '#/register':
oDiv.innerHTML = `<h1>This is register page!</h1>;`;
break;
default:
oDiv.innerHTML = `<h1>This is first page</h1>'`;
}
}
</script>02.VueRouter的安装使用
<body>
<div id="app"></div>
</body>
<script>
// step1:首先在根实例里面使用 VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是Home页面</h1>
</div>
`
};
let Login = {
template: `
<div>
<h1>这是Login页面</h1>
</div>
`
};
let Register = {
template: `
<div>
<h1>这是Register页面</h1>
</div>
`
};
// step2:实例化一个router对象
// 本质上是将路径和页面内容绑定了关系
let router = new VueRouter({
routes: [
{
path: '/',
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
},
]
});
let App = {
// router-link 标签会渲染成a标签，to会渲染成href属性，to后面的是 router 中定义的路径
// router-view 是内容渲染的出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`
};
new Vue({
el: '#app',
template: `<App/>`,
// step3:在根实例中注册router对象
router: router,
components: {
App,
}
})
</script>03.VueRouter之命名路由
<body>
<div id="app"></div>
</body>
<script>
// step1:首先在根实例里面使用 VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是Home页面</h1>
</div>
`
};
let Login = {
template: `
<div>
<h1>这是Login页面</h1>
</div>
`
};
let Register = {
template: `
<div>
<h1>这是Register页面</h1>
</div>
`
};
// step2:实例化一个router对象
// 本质上是将路径和页面内容绑定了关系
let router = new VueRouter({
routes: [
{
name: 'home', // 命名路由加上 name 属性，给 router-link 使用
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
},
]
});
let App = {
// router-link 标签会渲染成a标签，to会渲染成href属性，to后面的是 router 中定义的路径
// router-view 是内容渲染的出口
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>
`
};
new Vue({
el: '#app',
template: `<App/>`,
// step3:在根实例中注册router对象
router: router,
components: {
App,
}
})
</script>04.VueRouter之路由参数
<body>
<div id="app"></div>
</body>
<script>
// step1:首先在根实例里面使用 VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是Home页面</h1>
</div>
`
};
let UserParams = {
template: `
<div>
<h1>这是用户一的信息</h1>
</div>
`
};
let UserQuery = {
template: `
<div>
<h1>这是用户二的信息</h1>
</div>
`
};
// step2:实例化一个router对象
// 本质上是将路径和页面内容绑定了关系
let router = new VueRouter({
routes: [
{
name: 'home', // 命名路由加上 name 属性
path: '/',
component: Home,
},
{
name: 'userParams', // 用户参数
path: '/user/:userID',
component: UserParams,
},
{
name: 'userQuery',
path: '/user',
component: UserQuery,
},
]
});
let App = {
// router-link 标签会渲染成a标签，to会渲染成href属性，to后面的是 router 中定义的路径
// router-view 是内容渲染的出口
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: { userID: 1 } }">查看1</router-link>
<router-link :to="{ name: 'userQuery', query: { userID: 2 } }">查看2</router-link>
<router-view></router-view>
</div>
`
};
new Vue({
el: '#app',
template: `<App/>`,
// step3:在根实例中注册router对象
router: router,
components: {
App,
}
})
</script>05.VueRouter之路由参数的实现原理（感兴趣可百度）
06.VueRouter之子路由（详见08、09）
07.VueRouter之子路由之append（详见08、09）
08.VueRouter之子路由之非append
<body>
<div id="app"></div>
</body>
<script>
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是首页</h1>
</div>
`,
};
let Courses = {
// 在访问课程页面里面添加连接就实现了子路由
template: `
<div>
<h1>这是课程页面</h1>
<router-link to="/courses/lightcourses">轻课</router-link>
<router-link to="/courses/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: 'courses' }">课程</router-link>
<router-view></router-view>
</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home
},
{
name: 'courses',
path: '/courses',
component: Courses,
children: [ // 定义子路由的关键字 children
{
path: '/courses/lightcourses', // 这些和路由都是一样的，这里是直接写死的
component: LightCourses,
},
{
path: '/courses/degreecourses', // 子路由
component: DegreeCourses,
},
]
},
]
});
new Vue({
el: '#app',
template: `<App/>`,
components: {
App,
},
router: router,
})
</script>09.VueRouter之子路由之append升级版
<body>
<div id="app"></div>
</body>
<script>
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是首页</h1>
</div>
`,
};
let Courses = {
// 直接访问连接 name，自动给你拼接成子路由
template: `
<div>
<h1>这是课程页面</h1>
<router-link :to="{ name: 'lightcourses' }">轻课</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: 'courses' }">课程</router-link>
<router-view></router-view>
</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home
},
{
name: 'courses',
path: '/courses',
component: Courses,
children: [ // 定义子路由的关键字 children
{
name: 'lightcourses',
path: '/courses/lightcourses', // 这些和路由都是一样的，这里是直接写死的
component: LightCourses,
},
{
name: 'degreecourses',
path: '/courses/degreecourses', // 子路由
component: DegreeCourses,
},
]
},
]
});
new Vue({
el: '#app',
template: `<App/>`,
components: {
App,
},
router: router,
})
</script>10.VueRouter之子路由之路由重定向
<body>
<div id="app">
</div>
</body>
<script>
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是Home页面</h1>
</div>
`
};
let Login = {
template: `
<div>
<h1>这是Login页面</h1>
</div>
`
};
let Pay = {
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: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/payment',
redirect: '/login', // redirect 重定向，到支付页面的时候跳转到 /login
component: Pay,
},
]
});
new Vue({
el: '#app',
template: `<App/>`,
components: {
App
},
router: router,
});
</script>11.VueRouter之子路由之路由的钩子函数
<body>
<div id="app">
</div>
</body>
<script>
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是首页</h1>
</div>
`
};
let Login= {
template: `
<div>
<h1>这是Login页面</h1>
</div>
`
};
let Pay = {
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: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`,
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login
},
{
name: 'pay',
path: '/payment',
component: Pay,
meta: { required_login: true }
}
]
});
// 通过router对象的beforeEach(function(to, from, next))
// to: 要跳转到的压面
// from: 从哪里来
// next: 到了页面之后要到哪里（过程中插入行为）
router.beforeEach(function (to, from, next) {
console.log('to:', to);
if( to.meta.required_login ){
next('/login');
}else{
next();
}
});
new Vue({
el: '#app',
router: router,
template: `<App/>`,
components: {
App
}
})
</script>12.VueRouter之子路由之路径去掉井号
<body>
<div id="app">
</div>
</body>
<script>
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是首页</h1>
</div>
`
};
let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`
};
let Pay = {
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: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`,
};
let router = new VueRouter({
mode: 'history', // 添加 mode: history 表示去除 # 号
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
component: Pay,
meta: { login_required: true }
},
]
});
router.beforeEach(function(to, from, next){
if(to.meta.login_required){
next('/login')
}else{
next()
}
});
new Vue({
el: '#app',
router: router,
template: `<App/>`,
components: {
App
}
})
</script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录