#前端路由
前端页面根据不同路由显示不同的内容和页面,通过组件构建的单页面
优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户
缺点:不利于SEO,使用浏览器的前进后退的时候会重新发送请求,没有合理地利用缓存,单页面无法记住之前滚动的位置
#后端路由
服务器根据url的不同返回不同的页面
#vue-router用来构建SPA
#<router-link></router-link>或者this.$router.push({path:''})
#<router-view></router-view>
#动态路由
/user/:username
/user/:username/number/:number
#可以使用$route.params.username获取
// 建一个.vue页面作为组件,script中的js代码需要export default{}
// 在router文件夹中的index.js文件中引入这个页面
import 组件名 from 'xx/xx'
// 在下面的routes数组中修改
{
// mode: 'history', // 不设这个的话,默认是哈希,也就是路由为:/#/user/:username
path: '/xx/:参数',// 地址栏什么情况下显示这个页面
name: 'xx',
component: 引入的组件名
}
// 那么只要你在地址栏输入正确的路径,那么就可以显示这个组件
#嵌套路由
// 建多个.vue作为子组件,
// 在router文件夹中的index.js文件中引入这些页面
import 组件名 from 'xx/xx'
// 在下面的routes数组中修改
{
path: '/fu',// 地址栏什么情况下显示这个页面
name: 'xx',
component: 父组件名,
children: [
{
path: 'zi', // 不要写成/zi,/代表一级路由,也就是说/fu/zi无法访问到
name: 'xx',
component: 引入的子组件名
}
]
}
// 返回到父组件的文件
// 使用<router-view></router-view>,App.vue的router-view标签是提供给一级路由的
<router-link to="/fu/zi">第一个子组件</router-link>
<router-link to="/fu/anotherZi">第二个子组件</router-link>
<div>
<router-view></router-view>
</div>
// 这样点击链接就会在router-view中显示子组件
#编程式路由,通过js来实现页面的跳转
# $router.push("name")
# $router.push({path:"name"})
# $router.push({path:"name?a=123"}) 或者 $router.push({path:"name",query:{a:123}});
# $router.go(1) // 倒退1步
// 获取地址栏的参数需要用到 $route.query.a
// 首先你需要在router/index.js中定义好你需要跳转的页面
// 第一种方法
// 然后使用
<router-link to="/tiaozhuan">跳转到其它页面</router-link>
// 第二种方法
<button @click="jump">跳转到其它页面</button>
// 然后在methods中添加这个函数
methods: {
jump() {
this.$router.push("/tiaozhuan");
// 或者使用上面的任何一种方法都可以
}
}
#命名路由和命名视图
#给路由定义不同的名字,根据名字进行匹配
{
path: '/xx',
name: 'xx', // 也就是这个路由名字进行跳转
component: xx,
children: [
{
...
}
]
}
#给不同的router-view定义名字,通过名字进行对应组件的渲染
<router-link v-bind:to="{name:'路由name的值'}">跳转到其它页面</router-link>
#如果是动态路由
{
path: '/xx/:参数', // 动态路由
name: 'xx', // 也就是这个路由名字进行跳转
component: xx
}
<router-link v-bind:to="{name:'路由name的值', params:{参数: 参数值}">跳转到其它页面</router-link>
#命名视图,为router-view定义不同的name值
<router-view></router-view> // 不设name直接渲染路由为'/'的组件
<router-view name='zhujian1'></router-view>
<router-view name='zhujian2'></router-view>
{
path: '/xx/:参数', // 动态路由
name: 'xx', // 也就是这个路由名字进行跳转
components: {
default: '引入的组件名',
zhujian1: '引入的组件名',
zhujian2: '引入的组件名'
}
}