<!-- 引入对应的模块 -->
<script src="./static/vue.min.js"></script>
<script src="./static/vue-router.js"></script>
<div id="app">
<div>
<!-- 第三步:结合router-link和router-view调用 -->
<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对象路径和页面进行绑定对应关系
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} }">用户参数params</router-link>
<router-link :to="{ name: 'userquery', query: { userId: 2} }">用户参数 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,
},
{
// 路由的参数: /user/1 /user/2
name: "userparams",
path: '/user/:userId',
component: UserParams
},
{
// 路由参数: /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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。