|
一个个来, 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>
复制代码
|
|