官网的例子
https://router.vuejs.org/zh/guide/#html
一、简单的Vue Router
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> const Foo = { data(){ return { } }, template: '<div>foo</div>' } const Bar = { data(){ return { } }, template: '<div>bar</div>' } const router = new VueRouter({ routes: [ {path: '/foo', component: Foo}, {path: '/bar', component: Bar} ] }) // 注意：别忘记挂载 let App = { router, data(){ return { msg:"测试", } }, template: ` <div> <p>{{msg}}</p> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <router-view></router-view> </div> `, } new Vue({ el: "#app", data(){ return{ } }, components:{ App, } }) </script> </body> </html>
二、命名路由
注意：router-link 里的 to 要添加 v-bind，其它看官网
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> const Foo = { data(){ return { } }, template: '<div>foo</div>' } const Bar = { data(){ return { } }, template: '<div>bar</div>' } const router = new VueRouter({ routes: [ { path: '/foo', name: 'foo', component: Foo }, { path: '/bar', name: 'bar', component: Bar } ] }) // 注意：别忘记挂载 let App = { router, data(){ return { msg:"测试", } }, // 注意： to前面添加 v-bind template: ` <div> <p>{{msg}}</p> <p> <router-link :to="{name: 'foo'}">Go to Foo</router-link> <router-link :to="{name: 'bar'}">Go to Bar</router-link> </p> <router-view></router-view> </div> `, } new Vue({ el: "#app", data(){ return{ } }, components:{ App, } }) </script> </body> </html>
三、重定向
1、重定向url
const router = new VueRouter({
routes: [
{
path : '/',
redirect: '/foo',
},
{
path: '/foo',
name: 'foo',
component: Foo
},
{
path: '/bar',
name: 'bar',
component: Bar
}
]
})
2、重定向命名路由
const router = new VueRouter({
routes: [
{
path : '/',
redirect: {name: 'foo'},
},
{
path: '/foo',
name: 'foo',
component: Foo
},
{
path: '/bar',
name: 'bar',
component: Bar
}
]
})
四、动态路由匹配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> const Foo = { data(){ return { uid: null, } }, template: '<div>foo{{uid}}</div>', watch:{ '$route' (to, from) { // 对路由变化作出响应...发送ajax console.log(to.params.id) this.uid = to.params.id } } } const router = new VueRouter({ routes: [ { path: '/foo/:id', name: 'foo', component: Foo } ] }) // 注意：别忘记挂载 let App = { router, data(){ return { msg:"测试", } }, // 注意： to前面添加 v-bind // 关于参数的问题看官网的 命名路由 template: ` <div> <p>{{msg}}</p> <p> <router-link :to="{name: 'foo', params:{id:1}}">Go to Foo 1</router-link> <router-link :to="{name: 'foo', params:{id:2}}">Go to Foo 2</router-link> </p> <router-view></router-view> </div> ` } new Vue({ el: "#app", data(){ return{ } }, components:{ App, } }) </script> </body> </html>
五、编程式导航
利用v-on 和函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> const Foo = { data(){ return { } }, template: ` <div> <p>foo</p> <button @click="clickHandler">跳转</button> </div> `, methods:{ clickHandler(){ router.push({ path: '/bar' }) } } } const Bar = { data(){ return { } }, template: '<div>bar</div>' } const router = new VueRouter({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] }) let App = { router, data(){ return { text: "测试", } }, template: ` <div> <p>{{text}}</p> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <router-view></router-view> </div> `, } new Vue({ el: "#app", data(){ return { } }, components:{ App, } }) </script> </body> </html>
六、带参数的查询
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <App></App> </div> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> const Foo = { data(){ return {} }, template: '<div>foo</div>' } const Bar = { data(){ return {} }, template: '<div>bar</div>' } const router = new VueRouter({ routes: [ { path: '/foo', name: 'foo', component: Foo }, { path: '/bar', name: 'bar', component: Bar } ] }) let App = { router, data(){ return { msg: "测试" } }, // query 带参数的查询 /bar?userid=2 template: ` <div> <p>{{msg}}</p> <p> <router-link :to="{name: 'foo'}">Go to Foo</router-link> <router-link :to="{name: 'bar', query: {userid:2}}">Go to Bar</router-link> </p> <router-view></router-view> </div> `, } new Vue({ el: "#app", data(){ return { } }, components:{ App, }, }) </script> </body> </html>
七、其它
1、获取 路由信息对象
created 方法中的 this.$route
2、获取 路由对象 VueRouter
created(){
// 获取 路由信息对象
console.log(this.$route);
// 获取 路由对象 VueRouter
console.log(this.$router);
}
3、去除url中的#
const router = new VueRouter({
mode: 'history',
routes: [...]
})