完整URL
http://localhost:80/MzyPractice/chapter10/testb.php?name=Mei&radio=Test#dowel
1、传输协议：http，https
2、域名： localhost
3、端口： 不填写的话默认走的是80端口号
4、路径： /MzyPractice/chapter10/testb.php。 /表示根目录
5、查询参数：?name=Mei&radio=Test
6、哈希值：#dowel前端路由
1、是什么
前端路由是相对后端路由的一个概念，是开发SPA单页应用程序的必备核心模块。
本质：路由地址与组件之间映射
2、好处
- 用户体验更好
- 性能更优
3、实现原理
- 基于Url的hash
- 基于html5的历史模式api
hash：页面不刷新、还有访问记录
Vue-router 官方路由
与Vue.js核心深度集成的，开发SPA推荐使用
介绍
- 支持hash模式和html5历史模式
- 支持嵌套路由
- 支持编程式路由
- 支持路由参数
- 支持命名路由
使用步骤
1、安装vue-router
npm install vue-router --save
2、导入vue-router，并安装插件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、配置路由规则并创建路由实体
import Foo from './views/Foo'
import Good from './views/Good'
const router = new VueRouter({
routes: [
// 路由规则是一个对象，至少包含path和component两个属性
{path: '/foo', component: Foo},
{path: '/good', component: Good}
]
})
4、关联Vue实例
const app = new Vue({
router
}).$mount('#app')
最佳实战
1、增加路由规则目录routes
2、为了性能，必须使用懒加载
// 在src/routes/base.js中代码如下：
export default [
{
path: 'baseLogin',
name: 'baseLogin',
component: () =>import('@/views/base/Login.vue')
}
];
// 在src/router.js中代码如下：
import base from '@/routes/base.js'
const router = new VueRouter({
routes: [
// 路由规则是一个对象，至少包含path和component两个属性
..base
]
})
export default router路由重定向
const router = new VueRouter({
routes: [
// 路由规则是一个对象，至少包含path和component两个属性
{path: '/', redirect: '/foo'},
{path: '/foo', component: Foo},
{path: '/good', component: Good}
]
})嵌套路由
本质：组件中嵌套组件，父组件必须存在
// 路由规则定义
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: 'posts',
component: UserPosts
}
]
}
]
}) const User = {
template: `
User {{ $route.params.id }}
注意事项
嵌套路由与组件中导入另一个组件使用有什么区别？
1、嵌套路由其实就是类似iframe，页面嵌套页面，子页面可以动态变化
2、组件中使用子组件，子组件不能变，只能通过传参改变子组件内部逻辑动态路由
本质：通过url传参，但并非是查询字符串传参
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
// User组件中如何获取参数id
const User = {
template: 'User {{ $route.params.id }}'
}注意事项
当多个路由都匹配到同一个组件时，为了组件能够更高效更好的用户体验，所以必须组件实例被复用，这导致另一个问题出现：组件实例的生命周期钩子不会再被调用，为此要使用watch监听$route来解决
const User = {
template: '...',
watch: {
$route(to, from) {
// 对路由变化作出响应...
}
}
}路由导航
1、声明式导航
跳转 2、编程式导航
// 跳转到某个路由
this.$router.push({ path: '/home' })
// 替换到某个路由
this.$router.replace({ path: '/home' })
// 前进/后退
this.$router.go(3)注意事项
path不能与param一起使用，param是动态路由参数
query是查询字符串，可以给path和name一起使用
路由前加‘/’和不加的区别
命名路由
所谓命名路由：
在配置路由规则时，给路由规则配置一个name属性
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path:'/user/:id', name: 'user', component: User }
]
})命名视图
相当于一个页面有多个iframe嵌套，每个iframe都是同级关系
注意事项：
如果命名视图和嵌套路由同时使用，将很混乱
入口与路由规则对应关系
app.vue内入口与顶级路由规则对应
每个页面内入口与页面嵌套路由相对应