前后端分离， 后端只负责提供接口供前端使用，页面跳转都是前端自己实现，有两种方式：
1、hash模式# 开发时使用，不会导致404问题，不支持seo
2、h5的history.pushState 上线采用
路由四部曲：
1、映射表： 配置路径匹配哪个组件，这里的组件都是页面级组件
2、映射表注册：在VueRouter的实例里面注册
3、路由注册：在当前vm实例上注册
4、渲染：注册完之后要把组件的内容渲染到页面中，通过<router-view></router-view>
<router-link to="/home" tag="button">首页</router-link>跳转页面，不设置mode属性指定history方式就会默认使用hash。history方式要设置默认页面。tag属性表示想要这个标签以什么方式出现在页面上，此处是按钮，默认是超链接
<body>
<div id="app">
<!-- vue自带的全局组件 注册完组件之后把内容渲染到页面-->
<!--4、把内容渲染到页面-->
<router-view></router-view>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<!--必须放在vue后面-->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
let home = {template: '<div>首页</div>'};
let list = {template: '<div>列表</div>'};
let routes = [ //1、 映射表（数组） 页面级组件 一个页面就是一个组件
{path: '/home', component: home},
{path: '/list', component: list}
];
let router = new VueRouter({ // 引入vue-router自带VueRouter类
// 2、映射表注册
routes
});
let vm = new Vue({
el: '#app',
// 3、路由注册
router,
});
</script>
</body>
路由的编程式导航，在js中跳转页面，每个组件都会有
route(存属性)两个属性
let home = {
template: '<div>home<button @click="toList">去列表</button></div>',
methods: {
toList() {
this.$router.push('/list'); // 强制跳转路径
//this.$router.replace('/list'); // 路由替换，会把当前的替换掉
}
}
};
let list = {
template: '<div>list<button @click="toHome">去首页</button></div>',
methods: {
toHome() {
this.$router.go(-1); // 返回上一级
// this.$router.back(); // 返回上一级 一样的
}
}
};
let routes = [
{path: '', component: home}, // 默认展示页面
{path: '/home', component: home},
{path: '/list', component: list},
// {path: '*', component: home},// 都匹配不到的时候
{path: '*', redirect: '/home'} // 组件也要切换 404的时候
];
路由嵌套
{
path: '/detail',
component: detail,
children: [// 子路由的路径不能写/带/表示一级路由
{path: 'profile', component: profile},
{path: 'about', component: about}
]
}
路由传参 方式1：直接传递
let article = {template: '<div>第{{this.$route.params.c}}篇文章</div>'};
let routes = [
{
// /article/1
// /article/:c => {C: 1}=this.$route.params.c
path: '/article/:c', // 表示必须有值但值是随机的
component: article
}
];
方式2：使用对象作为to的属性并且使用参数，这种方法要求必须给路由起个名字，通过名字跳转，路径变化时用watch监听来发送ajax
<router-link :to="{name: 'pro', params: {c: 1}}">商品1</router-link>
<script>
let article = {
template: '<div>第{{this.$route.params.c}}篇文章</div>',
watch: { // 路径参数发生变化 监控参数的变化发送ajax
$route(){
alert('发送ajax');
}
}
};
let routes = [
{
path: '/article/:c', // 表示必须有值但值是随机的，
name: 'pro',
component: article
}
];
</script>
改了好久才发现是因为没有渲染
<router-view></router-view>
都是粗心惹的祸
网友评论