装Vue Router
Vue Router 是官方的 Vue 路由器,负责根据 URL 的变化来渲染不同的视图。
首先,安装 Vue Router:
1 | npm install vue-router |
设置路由视图
设置路由视图,首先定义路由配置,并创建不同的组件:
1 2 3 4 5 6 7 8 9 10 11 | import Vue from 'vue' ; import Router from 'vue-router' ; import Home from './components/Home.vue' ; import About from './components/About.vue' ; Vue.use(Router); export default new Router({ routes: [ { path: '/' , component: Home }, { path: '/about' , component: About } ] }); |
然后在主文件中引入并使用路由:
1 2 3 4 5 6 7 8 | import Vue from 'vue' ; import App from './App.vue' ; import router from './router' ; new Vue({ el: '#app' , router, render: h => h(App) }); |
路由参数与导航守卫
路由参数可以通过 :id
进行动态绑定。例如,创建一个用户详情页面:
1 2 3 4 5 6 7 8 9 | import Vue from 'vue' ; import Router from 'vue-router' ; import User from './components/User.vue' ; Vue.use(Router); export default new Router({ routes: [ { path: '/user/:id' , component: User } ] }); |
导航守卫可以用来控制导航行为。例如,可以使用 beforeEach 守卫来拦截所有导航:
1 2 3 4 | router.beforeEach((to, from, next) => { // 进行某种验证 next(); }); |