<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- SPA : Single Page Application 前端路由 1.锚点值 监视 2.ajax获取动态的数据 3.核心点是锚点值的改变 前端中 vue|react|angular 都很适合做单页面应用 --> <a href="#/login">登录页面</a> <a href="#/register">注册页面</a> <div id="app"> </div> <script type="text/javascript"> // onhashchange 事件 url上的锚点数据（#/xxx改变） var oDiv = document.getElementById('app'); window.onhashchange = function () { console.log(location.hash); // 根据不同的锚点值，对页面不同的切换。 switch (location.hash) { case '#/login': oDiv.innerHTML = '<h2>登录页面</h2>'; break; case '#/register': oDiv.innerHTML = '<h2>注册页面</h2>'; break; default: // statements_def break; } } </script> </body> </html>
vue+vue-router 主要来做单页面应用（Single Page Application）
为什么我们要做单页面应用？
（1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 “白屏” 用户体验不好
（2）SPA 单页面应用 ： 锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据
页面不立刻跳转用户体验好
vue-router集成
它是vue中核心插件
-
下载vue-router
npm init --yes
npm install vue-router --save-
引入vue-router的模块 默认会抛出一个VueRouter对象 另外还有两个全局的组件router-link 和router-view
-
-
Vue.use(VueRouter)
-
创建路由对象
var router = new VueRouter({
// 配置路由对象
routes:[
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
}
]
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <!-- 1.引入 vue-router的对象 --> <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script> <!-- 全局的VueRouter对象 vue-router 还给咱们提供了两个全局的组件 router-link router-view--> <script type="text/javascript"> // 2.让Vue使用该VueRouter创建 Vue.use(VueRouter); var Login = { template: ` <div>登录页面</div> ` }; var Register = { template: ` <div>注册页面</div> ` }; // 3.创建一个路由对象 var router = new VueRouter({ // 配置路由对象 routes: [ { path: '/login', component: Login }, { path: '/register', component: Register } ] }); var App = { <!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性--> template: ` <div> <router-link to="/login">登录页面</router-link> <router-link to="/register">注册页面</router-link> <router-view></router-view> </div> `, <!--路由组件的出口--> }; new Vue({ el: '#app', components: { App }, router, //使用路由，不然会报错 template: `<App />` }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <!-- 1.引入 vue-router的对象 --> <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script> <!-- 全局的VueRouter对象 vue-router 还给咱们提供了两个全局的组件 router-link router-view--> <script type="text/javascript"> // 2.让Vue使用该VueRouter创建 Vue.use(VueRouter); var Login = { template: ` <div>登录页面</div>` }; var Register = { template: ` <div>注册页面</div>` }; // 3.创建一个路由对象 var router = new VueRouter({ // 配置路由对象 routes: [ { path: '/login', name: 'login', component: Login }, { path: '/register', name: 'register', component: Register } ] }); var App = { // 绑定路由 template: ` <div> <router-link :to="{name:'login'}">登录页面</router-link> <router-link :to="{name:'register'}">注册页面</router-link> <router-view></router-view> </div>` //路由组件的出口 }; new Vue({ el: '#app', components: { App }, router, template: `<App />` }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <!-- 1.引入 vue-router的对象 --> <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script> <!-- 全局的VueRouter对象 vue-router 还给咱们提供了两个全局的组件 router-link router-view--> <script type="text/javascript"> // 路由范式 // (1)xxxx.html#/user/1 params // (2)xxxx.html#/user?userId = 2 query // 2.让Vue使用该VueRouter创建 Vue.use(VueRouter); var UserParams = { template: ` <div>我是用户1</div> `, created() { console.log(this.$route.params.userId); // 发送ajax请求 console.log(this.$router); } }; var UserQuery = { template: ` <div>我是用户2</div> `, created() { console.log(this.$route); // 发送ajax请求 console.log(this.$router); // 总的 router 对象 console.log('route',this.$route) // 单个的route 对象 } }; // 3.创建一个路由对象 var router = new VueRouter({ // 配置路由对象 routes: [ { // 动态的路由参数 以冒号开头 path: '/user/:userId', name: 'userp', component: UserParams }, { path: '/user', name: 'userq', component: UserQuery } ] }); var App = { <!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性--> template: ` <div> <router-link :to="{name:'userp',params:{userId:1}}">用户1</router-link> <router-link :to="{name:'userq',query:{userId:2}}">用户2</router-link> <router-view></router-view> </div> `, <!--路由组件的出口--> }; new Vue({ el: '#app', components: { App }, router, template: `<App />` }); </script> </body> </html>
4.路由对象挂载到vue实例化对象中
var App = {
template:`
<div>
<!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->
<router-link :to="{name:'login'}">登录页面</router-link>
<router-link :to="{name:'register'}">注册页面</router-link>
<!--路由组件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
components:{
App
},
//挂载
router,
template:`<App />`
});命名路由
给当前的配置路由信息对象设置name:'login'属性
:to = "{name:'login'}"
路由范式
(1)xxxx.html#/user/1 配置路由对象中
{
path:'/user/:id',
component:User
}
<router-link :to = "{name:'user',params:{id:1}}"></router-link>
(2)xxxx.html#/user?userId = 1
{ path:'/user' } <router-link :to = "{name:'user',query:{id:1}}"></router-link>
在组件内部通过this.$route 获取路由信息对象
嵌套路由
一个router-view 嵌套另外一个router-view
动态路由匹配
let User = {
template: '<div>User</div>'
}
let router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：
let User = {
template: '<div>User {{ $route.params.id }}</div>'
}