vue路由
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from './views/Home/HomePage.vue';
const HomePage = () => import('./views/Home/HomePage.vue');
Vue.use(Router);
--------------------------------
const router = new Router({
routes:[
{ path:'路由地址',component: '组件名',name: '路由别名' },
{ path:'/',component: HomePage,name: 'homepage' },
]
})
--------------------------------
export default router;
const router = new Router({
routes:[
{ path:'/homepage/:id',component: HomePage,name: 'homepage' },
{ path:'/homepage/:id/user/:username',component: HomePage,name: 'homepage' },
]
})
const router = new Router({
routes:[
{ path:'/homepage',component: HomePage,name: 'homepage',children:[
{path: '/one',component: One},
{path: '/two',component: Two},
{path: '/three',component: Three},
] },
]
})
const router = new Router({
routes:[
{ path:'/homepage',component: HomePage,name: 'homepage',children:[
{path: '/one',component: One},
{path: '/two', redirect: to => { return '/one' }},
{path: '/three',component: Three},
] },
]
})
router.push({ name: 'user', params: { userId: 123 }})
router.replace({path: '/user',params: { userId: 123 }})
router.beforeEach((to,from,next) => {
})
import Vue from 'vue';
import Router from 'vue-router';
const router = new Router ({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
meta: { requiresAuth: true , title: '导航页面1'}
},
{
path: 'bar1',
component: Bar1,
meta: { requiresAuth: false , title: '导航页面2'}
},
{
path: 'bar2',
component: Bar2,
meta: { requiresAuth: true , title: '导航页面2'}
}
]
}
]
})
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title;
}
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
export default router;