<!-- 引入对应的模块 --><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>命名路由（name）

<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>路由重定向 (redirect)

<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>路由之钩子函数 （router.beforeEach）

<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>