路由模式
懒加载的写法:
路由懒加载只有在使用这个component的时候才会加载这个相应的组件，这样写大大减少了初始页面 js 的大小并且能更好的利用游览器的缓存。
const Foo = resolve => require([’./Foo.vue’], resolve)
//或者
const Foo = () => import(’./Foo’);
/*import Home from "../views/Home";
import User from "../views/User";
import About from "../views/About"*/
const Home =()=> import(../views/Home);
const About =()=> import(../views/About');
const User =()=> import(../views/User);
const routes =[
path:'/'
name:'Home'
component: Home
]
// route Level code-splitting
// this generates a separate chunk (about
// whish is lorul
延迟加载动态导入和路由模式解析
路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置
Vue- Router在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的一样
借助了浏览器的 History API来实现的,这样可以使得页面跳转而不刷新,页面的状态就被维持在浏览器中
》vue -router-中默认使用的是hash模式,也就是会出现如URL: localhost/#中带有#号
》有三种模式
hash:使用RL的hash值来作为路由,用来指导浏览器动作的,对服务器端完全无用,支持所有浏览器。
History:以来html5 History APl和服务器配置。
Abstract:支持所有 javascript运行模式。如果发现没有浏览器的AP,路由会自动强制进入这个模式。
点击按钮后跳转：
<button @click = "$router.push('/')">主页</button>
在组件中的方法用时:
export default{
methods:{
add(){
this.$router.push();
}
}
}
vue自动将router-link渲染成a标签：
<router-link class = "bg" to="/about">关于我们<router-link>
在ronter-link中进行渲染时：（点击后链接变色）
<router-link to="chinese" active-class="active">查看作业<i class="el-icon-view el-icon--right"></i> </router-link>
设置属性：（点击之后激活发生颜色变化 并跳转页面）
<button :class = "{active:$route.path == '/user'}" @click="$router.push('/user')">个人中心</button>
注意是route.path
Css:
.active{
color:red !important;
}
效果：
子路由
menu组件：
<template>
<ul>
<li> menu </li>
<li> menu </li>
<li> menu </li>
<li> menu </li>
</ul>
</template>
<script>
export default {
name: 'Menu'
}
</script>
<style scoped>
</style>
user组件:
<template>
<div>
个人中心
<br>
<div class="menu" style="float: left; top: 1px;background: blueviolet;width: 200px;height: 200px">
<ul>
<li> <router-link to="/user/order">订单</router-link></li>
<li><router-link to="/user/menu">设置</router-link></li>
</ul>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'User'
}
</script>
<style scoped>
</style>
效果:(点击链接后页面不跳转进行切换)
动态路由和参数传递
<ul>
<li v-for="item in articles"><router-link :to="'/user/page'+item.id">{
{item.title}}</router-link></li>
</ul>
<template>
<div style="color: aqua;text-shadow: #2c3e50 2px 2px">
<h2>文章公用模板</h2>
文章id {
{$route.params.pid}}
<!-- 获取当前路由的参数-->
<h1>计算属性{
{pagid}}</h1>
</div>
</template>
<script>
export default {
name: 'MyPage',
computed: {
pagid(){
return this.$route.params.pid
}
}
}
</script>
<style scoped>
</style>
User.vue:
<template>
<div>
个人中心
<br>
<div class="menu" style="float: left; top: 1px;background: blueviolet;width: 200px;height: 200px">
<ul>
<li> <router-link to="/user/order">订单</router-link></li>
<li><router-link to="/user/menu">设置</router-link></li>
</ul>
<ul>
<li v-for="item in article" :key="item"><router-link :to="'/user/page/'+item.id">{
{item.title}}</router-link></li>
</ul>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'User',
data () {
return {
article: [
// eslint-disable-next-line standard/object-curly-even-spacing
{
id: 1, title: '文章一'},
// eslint-disable-next-line standard/object-curly-even-spacing
{
id: 2, title: '文章一2'},
// eslint-disable-next-line standard/object-curly-even-spacing
{
id: 3, title: '文章3'},
// eslint-disable-next-line standard/object-curly-even-spacing
{
id: 4, title: '文章4'}
]
}
}
}
</script>
index.js:
{
path: 'page/:pid',
component: MyPage
}
注意page后面的/:pid与 return this.$route.params.pid中的pid要相同，否则无法正常显示
效果:
点不同文章时旁边的id会发生变化
参数传递
传递参数主要有两种类型: params和query
》 params的类型:
配置路由格式:/user/(动态路由)
传递的方式:在path后面对应的值to=""user/+uid
传递后形成的路径:/user/9,/user/zs
接收参数:
$route. params.id
query的类型:
配置路由格式:/user,正常配置
传递的方式:对象中使用 query的key作为传递方式to={path: query:{id:1,name:abc}}
传递后形成的路径:/user?id=9,/user?id=zs
接收参数:$ route. query.name
重定向和别名
