VUE js跳转路由【程序化导航】、路由别名、组件嵌套路由

周大胖子 · 发表于 2018-11-29 23:23:55

一个个来， 1.先说 路由别名吧：
路由别名就是给一个路由加一个名字【我觉得挺无聊的不过如果放在嵌套路由内的话到还是不错的用法】

2.再来说说 组件嵌套路由吧：
嵌套路由，和angular 中一样，给他的路由项目配置children 属性，然后在组件的页面中的加入<router-view></router-view> ; 接着跳去吧

3.再来掰扯一下 程序化导航 ，这是个啥呢—— 这就是个 JS跳转，鬼知道为啥起这么高大尚的名字-、-

methods: {
jsrun() {
// this.$router.push('home')
this.$router.push({ path: "anli" });
},
}

复制代码

贴代码【记得大前提就是安装路由模块】
先贴最主要的 main.js

import Vue from 'vue'
import App from './App.vue'
// 3.1
import Home from './components/Home'
import News from './components/News'
import Anli from './components/Anli'
import Info from './components/Info'
import One from './components/One'
import Two from './components/Two'
import Six from './components/Six'
import Three from './components/Three'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
// 3.2
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{
path: '/anli', component: Anli, children: [ //利用 children 来规定子路由注意子路由无/
{ path: 'one', component: One }
, { path: 'two', component: Two }
, { path: 'six', name: 'lmsix', component: Six } // 别名路由
, { path: 'three', redirect: '/news' , component: Three} //重定向定到新闻页
]
},
{ path: '/info/:id/:name', component: Info }, //多传参
{ path: '*', component: Home }, //默认首页
]
const router = new VueRouter({
// routes // short for `routes: routes`
mode: 'history',
routes
})
Vue.config.productionTip = false
new Vue({
// 4
router,
render: h => h(App),
}).$mount('#app')

复制代码

后贴组件 Anli.vue 的

<template>
<div id="anli">
这是案例组件
<button @click="lmback()">点击触发返回上一步操作</button>
<h2>组件嵌套</h2>
<hr>
<ol>
<li> <router-link to="/anli/one"> 案例组件1</router-link></li>
<li> <router-link to="/anli/two"> 案例组件2</router-link></li>
<li> <router-link to="/anli/three"> 案例组件3 路由重定向的测试</router-link></li>
<li> <router-link :to="{ name: 'lmsix', params: { userId: 123 }}" > 案例组件6 路由命名的测试</router-link></li>
</ol>
<div class="lmbox">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
b: false,
};
},
methods: {
// 广播数据
lmback() {
this.$router.go(-1);
}
},
mounted() {
//在组件加载的时候就接收
}
};
</script>
<style>
.lmbox{
margin:10px auto;
border:3px solid #eee;
width: 400px;
height: 200px;
}
</style>

复制代码

周大胖子 · 发表于 2018-11-29 23:26:08

关于回退与前进的 JS操作

// go forward by one record, the same as history.forward()
router.go(1)
// go back by one record, the same as history.back()
router.go(-1)
// go forward by 3 records
router.go(3)
// fails silently if there aren't that many records.
router.go(-100)
router.go(100)

复制代码

lmback() {
this.$router.go(-1);
}

复制代码

咳咳这是加载路由工具后的用法