概念
路由就是一个网址,它当中的路由参数也是指网址参数
路由参数:根据路由参数显示不同的内容 ->不同的组件 手册
初体验
<div id="app">
<ul>
<li><router-link to="/films">电影</router-link></li>
<li><router-link to="/yingyuan">影院</router-link></li>
<li><router-link to="/tehui">特惠</router-link></li>
<li><router-link to="/my">我的</router-link></li>
</ul>
<router-view />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤1:引入vue.js和vue-router.js文件
// 步骤2:创建组件 通过Vue.component来定义 或者简写
// 步骤3:声明路由 通过new VueRouter传递对象 routes数组
// 步骤4:在new Vue里面注册激活路由
// 步骤5:在页面挖坑显示 <router-view />
const films = {
template: `<h1>电影区域</h1>`
}
const yingyuan = {
template: `<h1>影院区域</h1>`
}
const tehui = {
template: `<h1>特惠区域</h1>`
}
const my = {
template: `<h1>我的区域</h1>`
}
// 声明组件访问路径
const router = new VueRouter({
// mode: 'hash', 通过location.hash切换,通过window.onhashchange 监听切换
mode: 'history', //通过history.pushState 切换,window.onpopstate 监听路径的切换
// 当路由模式从hash改变成history时,
// 有时候本来好好的网站突然访问不了了
// 可能因为服务器配置文件
// https://router.vuejs.org/zh/guide/essentials/history- mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
// TODO. vue后面项目写完,大家统一先hash模式上线
// 然后切换history
routes: [// 特别注意其他地方都是router 只有这里是routes
// path路由参数访问地址
// name后期可以根据名字跳转
// component这个路由显示的组件数据
{path: '/', name: 'index', component: films},
{path: '/yingyuan', name: 'yingyuan', component: yingyuan},
{path: '/tehui', name: 'tehui', component: tehui},
{path: '/my', name: 'my', component: my},
{path: '/my', name: 'my', component: my, alias: '/a'},
// /my-* 匹配my-开头的路由
// * 匹配所有路径(上面路由都不匹配 则走下下面这个)
{path:'*', redirect: '/'}
]
})
//定义vue并激活路由
let vm = new Vue({
// 激活路由
// router:router,
router,
// el: '#app',
data: {
}
}).$mount('#app')
</script>
redirect: ‘path里面声明的路径’ 声明重定向/跳转网址
alias:‘名字/别名’ 就是有两个网址参数
多学一招:
path里面可以通过通配
my- 匹配my-开头的路由
*匹配所有路径
vue路由原理
vue路由是基于单页面应用SPA思想/规则实现的
基于BOM的location和history实现的hash
location.hash = 值
location.onhashchange = 处理函数
history
history.pushState = 值
history.onpopstate = 处理函数
在这提到的单页面应用SPA在项目中规定了页面局部刷新,从而减少HTTP请求 加快页面响应速度,提高用户体验度,但不利于SEO优化
嵌套路由
一个网址显示多个组件(肯定是父子关系)
<div id="app">
<router-view></router-view>
</div>
<script>
// 定义组件
const app = {
template: `
<div>
<div class="header">头部</div>
<div class="nav">
<router-link to="/users" >用户管理</router-link><br />
<router-link to="/goods" >商品管理</router-link>
</div>
<fieldset>
<legend>内容区域</legend>
<!-- 父挖坑显示子 -->
<router-view />
</fieldset>
</div>
`
}
const users = {
template: `<div>用户列表内容</div>`
}
const goods = {
template: `<div>商品列表内容</div>`
}
// 创建路由
const router = new VueRouter({
routes: [
// {path: '/', component: app},
// {path: '/users', component: users},
// {path: '/goods', component: goods}
// 先父路径 再子路径
// /users
{
path: '/',
component: app,
children: [// 子统一直写名称
{path: 'users', component: users},
{path: 'goods', component: goods}
]
},
]
})
// 激活
let vm = new Vue({
router,
el: '#app',
data: {
}
})
</script>
实战过程中大家也会对routes、route、router产生混淆
这里的routes是vue-rouer里面的配置方法,可以用来创建多个路由对象,而route为router中可以获取name、path、query、params等,,router是创建VueRouter的一个实例,一般使用在编程式导航中,如$router.push方法
编程式导航:js的跳转方式
注意:路由传递参数和传统传递参数是一样的,命名路由类似表单提交而查询就是url传递,在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了
1.params搭配路由传递,刷新页面参数会丢失
2.query查询参数搭配传递,刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值
1:无参数 :地址语法
router.push({ path: ‘/home’ })
2:有参数 /user/123
router.push({ path: ‘user’, params: { userId: ‘123’ }})
3:有参数 /user?userId=123
router.push({ path: ‘user’, query: { userId: ‘123’ }})
1:无参数 :名字语法
router.push({ name: ‘user’ })
2:有参数 /user/123
router.push({ name: ‘user’, params: { userId: ‘123’ }})
3:有参数 /user?userId=123
router.push({ name: ‘user’, query: { userId: ‘123’ }})