Vue项目开发（路由、重定向、路由参数、动态路由匹配、编程式导航、路由嵌套）

2020-06-05 07:22 449人阅读评论(0)

#■目录

路由概念&作用

通过路由实现重定向跳转（3.xx 重定向 301 永久跳转/站外 302 临时跳转/站内）

理解路由模式种类&原理&单页面应用

路由参数

嵌套路由概念&作用

编程导航的作用（JS跳转页面）

导航守卫的作用

一、路由

明确需求

什么是路由：就是网址

普通用户：网址
开发人员：域名
框架里面：路由   （express、vue

什么是路由参数：就是网址参数

路由参数目的/作用：显示不同的页面

语法

vue渐进式框架 （1-越来越难，2-可以是用一个库也可以当框架使用/vue全家桶）

vue全家桶就是由N个库组成的（vue.js、vue-router.js、axios、vuex等

手册：https://router.vuejs.org/zh/
代码：https://unpkg.com/vue-router/dist/vue-router.js
步骤

步骤1：引入vue.js库和vue-router.js库
步骤2：创建组件  通过Vue.component来定义  或者简写  {template: , methods...}
步骤3：声明路由  通过new VueRouter传递对象  里面routes数组来定义
步骤4：激活  在new Vue注册激活路由
步骤5：在页面挖坑显示  <router-view />

小试牛刀（老语法）

<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <!-- 传统用a标签，但是vue封装过了 用 router-link -->
    <ul>
        <li><router-link to="/">电影</router-link></li>
        <li><router-link to="/cinemas">影院</router-link></li>
        <li><router-link to="/tehui">特惠</router-link></li>
        <li><router-link to="/my">我的</router-link></li>
    </ul>
    <hr />
    <!-- 步骤6：挖坑显示数据（会将当前路由参数对应的组件数据放到这个坑里面） -->
    <router-view />
</div>
<!-- 步骤1：引入vue库和vue-router库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤2：创建组件
const films = Vue.component('films', {
    template: `<div>电影内容</div>`
})
const cinemas = Vue.component('cinemas', {
    template: `<div>影院内容</div>`
})
const tehui = Vue.component('tehui', {
    template: `<div>特惠内容</div>`
})
const my = Vue.component('my', {
    template: `<div>我的内容</div>`
})

// 步骤3：声明路由 加载对应组件数据
const router = new VueRouter({ // 留心在routes数组中声明
    routes: [// 每个对象代表一个路由 
        // {path: 路径, name: 名字, component: 组件}
        // path就是后期访问的路由参数【必须】
        // name不写也行主要用来跳转【可选但是必须唯一】
        // component路由显示的页面数据【必须】
        {path: '/',        component: films},
        {path: '/films',   component: films},
        {path: '/cinemas', component: cinemas},
        {path: '/tehui',   component: tehui},
        {path: '/my',      component: my},
    ]
})

const vm = new Vue({
    // 步骤4
    // 激活  键固定的 值无所谓，但是我写的时候可以一样
    // 目的  ES6 对象属性的简写
    // router: router,
    router,
    el: '#app',
    data: {

    }
})
</script>
</body>
</html>

小试牛刀（简化语法）

<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <ul>
        <li><router-link to="/">电影</router-link></li>
        <li><router-link to="/cinemas">影院</router-link></li>
        <li><router-link to="/tehui">特惠</router-link></li>
        <li><router-link to="/my">我的</router-link></li>
    </ul>
    <hr />
    <!-- 步骤5：挖坑显示 -->
    <router-view />
</div>
<!-- 步骤1：引入vue和vue-router库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤2：定义组件（简化1）
const films = { template: `<div>电影内容</div>` }
const cinemas = { template: `<div>影院内容</div>` }
const tehui = { template: `<div>特惠内容</div>` }
const my = { template: `<div>我的内容</div>` }

// 步骤3：创建路由
const router = new VueRouter({
    routes: [ // 留心：这个键不加r 而是 s
        {path: '/',         component: films},
        {path: '/films',    component: films},
        {path: '/cinemas',  component: cinemas},
        {path: '/tehui',    component: tehui},
        {path: '/my',       component: my},
    ]
})

const vm = new Vue({
    // 步骤4：激活
    router,

    // el: '#app', （简化2 换一个方式写）
    data: {

    }
}).$mount('#app')
</script>
</body>
</html>

小总结

为什么要学习路由：后期根据不同的参数，显示不同的组件/页面

为什么了解：因为vue脚手架生成的框架中都封装好了，咱们这边就是了解原理

路由使用流程

步骤1：引入vue和vue-router库
步骤2：定义组件
步骤3：创建路由
步骤4：激活
步骤5：挖坑显示
步骤6：设置a标签跳转

#二、重定向和别名!!

明确需求

明确：稍微好一点的项目，当你在地址栏随便输入字符串时，会显示404页面
需求：我们要实现的案例，当出现404页面时，跳转首页

语法

const router = new VueRouter({
 routes: [
     {path:"路径" , name:"", component:组件名, redirect:"路径", alias:"路径别名"}
 ]
})
redirect:“路径” 重定向/跳转

alias:’'路径别名"

多学一招：path支持类正则 my-* 表示my-开头的就匹配 * 通配

##练习一下

需求：如果组件路由都没匹配则重定向/跳转到首页
代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <ul>
        <li><router-link to="/">电影</router-link></li>
        <li><router-link to="/cinemas">影院</router-link></li>
        <li><router-link to="/tehui">特惠</router-link></li>
        <li><router-link to="/my">我的</router-link></li>
    </ul>
    <hr />
    <!-- 步骤5：挖坑显示 -->
    <router-view />
</div>
<!-- 步骤1：引入vue和vue-router库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤2：定义组件（简化1）
const films = { template: `<div>电影内容</div>` }
const cinemas = { template: `<div>影院内容</div>` }
const tehui = { template: `<div>特惠内容</div>` }
const my = { template: `<div>我的内容</div>` }

// 步骤3：创建路由
const router = new VueRouter({
    routes: [ // 留心：这个键不加r 而是 s
        {path: '/',                  component: films},
        {path: '/films',             component: films},
        {path: '/cinemas',           component: cinemas},
        {path: '/tehui',             component: tehui},
        {path: '/my',  alias:"/my2", component: my},
        // {path: '/my2',       component: my},
        // 留心在最后加
        {path: '*', redirect: "/"}
    ]
})

const vm = new Vue({
    // 步骤4：激活
    router,

    // el: '#app', （简化2 换一个方式写）
    data: {

    }
}).$mount('#app')
</script>
</body>
</html>

三、HTML5 History 模式(重理解)

明确需求

语法

练习

<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <ul>
        <li><router-link to="/">电影</router-link></li>
        <li><router-link to="/cinemas">影院</router-link></li>
        <li><router-link to="/tehui">特惠</router-link></li>
        <li><router-link to="/my">我的</router-link></li>
    </ul>
    <hr />
    <!-- 步骤5：挖坑显示 -->
    <router-view />
</div>
<!-- 步骤1：引入vue和vue-router库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤2：定义组件（简化1）
const films = { template: `<div>电影内容</div>` }
const cinemas = { template: `<div>影院内容</div>` }
const tehui = { template: `<div>特惠内容</div>` }
const my = { template: `<div>我的内容</div>` }

// 步骤3：创建路由
const router = new VueRouter({
    // 声明路由模式
    // mode: 'hash'  很丑有个#号
    mode: 'history', // 1 留心 咱们用history模型后期上线得单独配置服务器  2 原理
    // 声明路由
    routes: [ // 留心：这个键不加r 而是 s
        {path: '/',                  component: films},
        {path: '/films',             component: films},
        {path: '/cinemas',           component: cinemas},
        {path: '/tehui',             component: tehui},
        {path: '/my',  alias:"/my2", component: my},
        // {path: '/my2',       component: my},
        // 留心在最后加
        {path: '*', redirect: "/"}
    ]
})

const vm = new Vue({
    // 步骤4：激活
    router,

    // el: '#app', （简化2 换一个方式写）
    data: {

    }
}).$mount('#app')
</script>
</body>
</html>

其他：前端路由简介&原理

单页面应用（SPA）概念

单页面应用（SPA）原理

hash路由（location.hash 切换）
window.onhashchange 监听路径的切换
history路由（history.pushState 切换） 
window.onpopstate 监听路径的切换

hash路由案例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <button onclick="fun1()">测试1</button>
    <button onclick="fun2()">测试2</button>
    <hr />
    <a href="#p1">p1</a>
    <a href="#p2">p2</a>
    <a href="#p3">p3</a>
    <script>
    function fun1() { location.hash = 'p1' }
    function fun2() { location.hash = 'p2' }

    document.onmouseover = function() { window.innerDocClick = true; }
    document.onmouseleave = function() { window.innerDocClick = false; }

    window.onhashchange = function() {
        if (window.innerDocClick) {
            alert('You click a link');
        } else {
            alert('You click browser button');
        }
    }　　　
    </script>　　
</body>
</html>

history路由案例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <button onclick="fun1()">测试1</button>
    <button onclick="fun2()">测试2</button>
    <script>
    window.onpopstate = function(event) {
        alert('发送异步请求')
    }
    
    function fun1() {
        window.history.pushState(null,null,'/page1');
        alert('发送异步请求')
    }
    function fun2() {
        window.history.pushState(null,null,'/page2');
        alert('发送异步请求')
    }
    </script>
</body>
</html>

小总结!!!

vue中如何切换路由模式：直接在new VueRouter({ mode: "hash/history 留心上线得配置" })
vue路由原理：先解释了SPA和MPA  然后说了下原理利用BOM API

简单再说下vue路由模式

https://router.vuejs.org/zh/api/#mode

常用路由模式有2个，分别为hash和history 直接修改路由构造函数加个mode键即可

准确地说有3个，hash/history用于客户端，abstract用户服务端

简单再说一下vue路由原理

首先vue路由是基于SPA单页面应用思想去开发的

利用BOM API 来使用

hash模式通过 BOM location对象的hash属性来改变路由

history模式通过BOM history对象的pushState属性来改变路由

简单再说一下什么是单页面应用SPA，优缺点，如何选择

SPA优点：减少HTTP请求、加载响应数据快、提高用户体验度
SPA缺点：不利于SEO优化（就是百度可以搜到你）

如何选择
根据项目需求，没有明确要求，直接用vue脚手架创建框架就行，
但是明确需要seo优化则通过：Vue.js 服务器端渲染（nuxt.js）

四、路由参数!!!

明确需求

语法

路由增加参数声明，语法：path: ‘/路径/:参数名…’
组件使用（在HTML中）：$route.params.参数名
组件使用（在 JS中）：this.$route.params.参数名
脚下留心：有个瑕疵，钩子函数created中仅能获取第一次的不能每次获取

练习

步骤1：修改导航，增加两个 /my/1 和 /my/2

步骤2：修改路由定义，增加参数声明（留心：主要是冒号

步骤3：获取参数

<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <ul>
        <li><router-link to="/">电影</router-link></li>
        <li><router-link to="/cinemas">影院</router-link></li>
        <li><router-link to="/tehui">特惠</router-link></li>
        <!-- <li><router-link to="/my">我的</router-link></li> -->
        <li><router-link to="/my/1">我的1</router-link></li>
        <li><router-link to="/my/2">我的2</router-link></li>
    </ul>
    <hr />
    <!-- 步骤5：挖坑显示 -->
    <router-view /> 
</div>
<!-- 步骤1：引入vue和vue-router库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤2：定义组件（简化1）
const films = { template: `<div>电影内容</div>` }
const cinemas = { template: `<div>影院内容</div>` }
const tehui = { template: `<div>特惠内容</div>` }
const my = { 
    template: `<div>
            我的内容{{$route.params.id}}
            <hr />
            <button @click="getIdFn">另类解决每次都可以获取（实战没用</button>
    </div>`,
    // 明确：id在页面直接显示没有意义
    // 实战：普遍是进入详情页，咱们就获取ip数据，然后发送异步请求
    created() {
        console.log(this.$route.params.id)
    },
    // 声明普通方法
    methods: {
        getIdFn() {
            alert(this.$route.params.id)
        }
    }
}

// 步骤3：创建路由
const router = new VueRouter({
    routes: [ // 留心：这个键不加r 而是 s
        {path: '/',                  component: films},
        {path: '/films',             component: films},
        {path: '/cinemas',           component: cinemas},
        {path: '/tehui',             component: tehui},
        // {path: '/my',  alias:"/my2", component: my},
        // {path: '/my2',       component: my},
        {path: '/my/:id',       component: my},
        // 留心在最后加
        {path: '*', redirect: "/"}
    ]
})

const vm = new Vue({
    // 步骤4：激活
    router,

    // el: '#app', （简化2 换一个方式写）
    data: {

    }
}).$mount('#app')
</script>
</body>
</html>

五、动态路由匹配!!!

概念

就是通过语法来实时监控你路由变化

明确需求

明确：路由参数中是点击获取参数发送异步请求吗？非也，在工作中很多场景需要打开就发送

思考：如何实现

回答：通过钩子函数即可

发现：上述语法有瑕疵，第一次可以

但是：后续不可以，不能监控参数变化

语法

watch: {
    // 普遍的方法名都是模型中的键
    // 这个特殊，单独理解
    '$route' (newData, oldData) {
      // 对路由变化作出响应...
    }
}


beforeRouteUpdate (newData, oldData, next) {
    // 脚下留心：
    // 这里面只能通过newData来获取路由参数
    // 语法：newData.params.参数名
    // next()  可以拦截访问 跳转  或者 继续向下匹配
    // next({ path: '/' })
}

小试牛刀

<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <ul>
        <li><router-link to="/">电影</router-link></li>
        <li><router-link to="/cinemas">影院</router-link></li>
        <li><router-link to="/tehui">特惠</router-link></li>
        <!-- <li><router-link to="/my">我的</router-link></li> -->
        <li><router-link to="/my/1">我的1</router-link></li>
        <li><router-link to="/my/2">我的2</router-link></li>
    </ul>
    <hr />
    <!-- 步骤5：挖坑显示 -->
    <router-view /> 
</div>
<!-- 步骤1：引入vue和vue-router库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤2：定义组件（简化1）
const films = { template: `<div>电影内容</div>` }
const cinemas = { template: `<div>影院内容</div>` }
const tehui = { template: `<div>特惠内容</div>` }
const my = { 
    template: `<div>
            我的内容{{$route.params.id}}
            <hr />
            <button @click="getIdFn">另类解决每次都可以获取（实战没用</button>
    </div>`,
    // 明确：id在页面直接显示没有意义
    // 实战：普遍是进入详情页，咱们就获取ip数据，然后发送异步请求
    created() {
        console.log(this.$route.params.id)
    },
    // 声明普通方法
    methods: {
        getIdFn() {
            alert(this.$route.params.id)
        }
    },
    // 侦听器  
    // watch: {
    //     // 监控路由变化
    //     '$route' (newData, oldData) {
    //         console.log(newData, oldData)
    //         console.log('watch中获取：', this.$route.params.id)
    //     }
    // }
    // 导航守卫：守护导航的门卫  
    // 必须这大爷按操作按钮门才打开
    // 对应我们代码中的next()
    beforeRouteUpdate (newData, oldData, next) {
        // console.log(newData, oldData)
        console.log(newData.params.id)
        next()              // 继续向下走
        // next({path:'/'}) // 拦截逻辑处理后跳转
    }
}

// 步骤3：创建路由
const router = new VueRouter({
    routes: [ // 留心：这个键不加r 而是 s
        {path: '/',                  component: films},
        {path: '/films',             component: films},
        {path: '/cinemas',           component: cinemas},
        {path: '/tehui',             component: tehui},
        // {path: '/my',  alias:"/my2", component: my},
        // {path: '/my2',       component: my},
        {path: '/my/:id',       component: my},
        // 留心在最后加
        {path: '*', redirect: "/"}
    ]
})

const vm = new Vue({
    // 步骤4：激活
    router,

    // el: '#app', （简化2 换一个方式写）
    data: {

    }
}).$mount('#app')
</script>
</body>
</html>

小总结

什么是动态路由匹配：监控路由参数变化的语法

应用场景：商品详情页根据路由参数获取最新数据

语法：可以参考从手册复制

六、嵌套路由!!!

明确需求

思考：如何实现上述需求

回答：通过下述嵌套路由语法

语法

小试牛刀

需求：解决访问goods路径的时候也显示app组件
需求代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>
        <script>
            // 定义组件
            const app = {
                template: `
                    <div>
                        <div class="header">头部</div>
                        <div class="nav">
                            用户管理<br />    
                            商品管理<br />    
                        </div>
                        <fieldset>
                            <legend>内容区域</legend>
                        </fieldset>
                    </div>
                `
            }

            const users = {
                template: `<div>用户列表内容</div>`
            }

            const goods = {
                template: `<div>商品列表内容</div>`
            }

            // 创建路由
            const router = new VueRouter({
                routes: [
                    {path: '/', component: app},
                    {path: '/users', component: users},
                    {path: '/goods', component: goods}
                ]
            })

            // 激活
            let vm = new Vue({
                router,
                el: '#app',
                data: {

                }
            })
        </script>
    </body>
</html>

完成代码：1-在需要显示子组件的内容中挖坑，2-在需要显示子组件的路由上定义children填坑

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script>
// 定义组件
const app = {
    template: `
        <div>
            <div class="header">头部</div>
            <div class="nav">
                用户管理<br />    
                商品管理<br />    
            </div>
            <fieldset>
                <legend>内容区域</legend>
                <router-view />
            </fieldset>
        </div>
    `
}

const users = { template: `<div>用户列表内容</div>` }
const goods = { template: `<div>商品列表内容</div>` }
const welcome = { template: `<div>你好酷狗</div>` }

// 创建路由
const router = new VueRouter({
    routes: [
        {
            path: '/a', component: app,
            children: [
                // 子能匹配就会填坑
                // 默认显示：父和子一样
                // 访问规则（子不要/开头）：先父路径再子路径（注：没有匹配的子 则父坑里没有数据
                {path: '/a', component: welcome},
                {path: 'users', component: users},
                {path: 'goods', component: goods}
            ]
        },
        // {path: '/users', component: users},
        // {path: '/goods', component: goods}
    ]
})

// 激活
let vm = new Vue({
    router,
    el: '#app',
    data: {

    }
})
</script>
</body>
</html>

小总结

什么是嵌套路由：一个网址，显示多个组件

语法

1 父挖坑  			    router-view 
2 父路由定义子路由填坑


默认填坑   	    父path和子的path一样
访问规则(推荐)  父路径 + 子路径（留心子写path的时候别 / 开头

七、命名视图!!

明确需求

需求：将嵌套路由改成命名视图

语法

小试牛刀

需求：解决访问goods路径的时候也显示app组件
需求代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>
        <script>
            // 定义组件
            const app = {
                template: `
                    <div>
                        <div class="header">头部</div>
                        <div class="nav">
                            用户管理<br />    
                            商品管理<br />    
                        </div>
                        <div class="main"></div>
                    </div>
                `
            }

            const users = {
                template: `<div>用户列表内容</div>`
            }

            const goods = {
                template: `<div>商品列表内容</div>`
            }

            // 创建路由
            const router = new VueRouter({
                routes: [
                    {path: '/', component: app},
                    {path: '/users', component: users},
                    {path: '/goods', component: goods}
                ]
            })

            // 激活
            let vm = new Vue({
                router,
                el: '#app',
                data: {

                }
            })
        </script>
    </body>
</html>

完成代码：命名视图（也就一次性展示多个组件同级）

1. 根据需求挖多个同级坑 留心必须加name属性
2. 定义路由component改为components并且值是对象 （default键 - 默认坑， name名键 - 对应坑）


<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <router-view name="usersKeng"></router-view>
    <router-view name="goodsKeng"></router-view>
</div>
<script>
// 定义组件
const app = {
    template: `
        <div>
            <div class="header">头部</div>
            <div class="nav">
                用户管理<br />    
                商品管理<br />    
            </div>
            <div class="main"></div>
        </div>
    `
}

const users = {
    template: `<div>用户列表内容</div>`
}

const goods = {
    template: `<div>商品列表内容</div>`
}

// 创建路由
const router = new VueRouter({
    routes: [
        {
            path: '/', 
            // component: app,
            components: { // 留心：因为同级多个所以加s
                //default是关键词显示默认坑
                default: app,
                //键就是name属性值，设置对应坑数据
                usersKeng: users,
                goodsKeng: goods
            }
        },
        // {path: '/users', component: users},
        // {path: '/goods', component: goods}
    ]
})

// 激活
let vm = new Vue({
    router,
    el: '#app',
    data: {

    }
})
</script>
</body>
</html>

应用场景

传统
routes: [
    {path: '/', component: Index},
    {path: '/login', component: Login},
    {path: '/reg', component: Reg},
    {path: '/goods', component: Goods},
    {path: '/cart', component: Cart}
]

推荐
routes: [
    {path: '/', component: {
        default: Index,
        navs: Navs
    }},
    {path: '/login', component: {
        default: Login,
        navs: Navs
    }},
    {path: '/reg', component: Reg},
    {path: '/goods', component: {
        default: Goods,
        navs: Navs
    }},
    {path: '/goodsDetail', component: {
        default: goodsDetail,
        navs: Navs2
    }},
    {path: '/cart', component: Cart}
]

八、路由命名&编程式的导航!!!

铺垫

咱们写项目主要分两步其实就可以搞定，但是细节比较多

能够显示静态页面（跳转页面：a标签，js跳转location.href）
能够请求接口

明确需求

语法

之前的都是通过【提前设置好a标签router-link】来实现跳转，而在实际开发中经常需要【通过js】来实现跳转（编程式的导航），如何实现呢？

router.push({path/name:"", query/params: {参数名:参数值,...,...}})

query   直接转换为get形式传递参数（也就是你的跳转路径后面 ?键=值&....键=值
params  用来填充  定义路由时的冒号占位

练习

需求代码：点击导航，将之前通过router-link跳转换成js跳转（编程式导航）

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script>
    // 定义组件
    const app = {
        template: `
            <div>
                <div class="header">头部</div>
                <div class="nav">
                    <router-link to="/users" >用户管理</router-link><br />    
                    <router-link to="/goods" >商品管理</router-link>
                </div>
                <fieldset>
                    <legend>内容区域</legend>
                    <!-- 父挖坑显示子 -->
                    <router-view />
                </fieldset>
            </div>
        `
    }

    const users = {
        template: `<div>用户列表内容</div>`
    }

    const goods = {
        template: `<div>商品列表内容</div>`
    }

    // 创建路由
    const router = new VueRouter({
        routes: [
            // {path: '/', component: app},
            // {path: '/users', component: users},
            // {path: '/goods', component: goods}

            // 先父路径 再子路径
            // /users
            {
                path: '/', 
                component: app,
                children: [// 子统一直写名称
                    {path: 'users', component: users},
                    {path: 'goods', component: goods}
                ]
            },
        ]
    })

    // 激活
    let vm = new Vue({
        router,
        el: '#app',
        data: {

        }
    })
</script>
</body>
</html>

完成代码

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script>
// 定义组件
const app = {
    methods: {
        goUsersFn() {
            router.push({path: '/users'})
        },
        goGoodsFn() {
            router.push({path: '/goods'})
        }
    },
    template: `
        <div>
            <div class="header">头部</div>
            <div class="nav">
                <!--  <router-link to="/users" >用户管理</router-link><br />    
                <router-link to="/goods" >商品管理</router-link> -->

                <button @click="goUsersFn">用户管理</button>
                <button @click="goGoodsFn">商品管理</button>
            </div>
            <fieldset>
                <legend>内容区域</legend>
                <!-- 父挖坑显示子 -->
                <router-view />
            </fieldset>
        </div>
    `
}

const users = {
    template: `<div>用户列表内容</div>`
}

const goods = {
    template: `<div>商品列表内容</div>`
}

// 创建路由
const router = new VueRouter({
    routes: [
        // {path: '/', component: app},
        // {path: '/users', component: users},
        // {path: '/goods', component: goods}

        // 先父路径 再子路径
        // /users
        {
            path: '/', 
            component: app,
            children: [// 子统一直写名称
                {path: 'users', component: users},
                {path: 'goods', component: goods}
            ]
        },
    ]
})

// 激活
let vm = new Vue({
    router,
    el: '#app',
    data: {

    }
})
</script>
</body>
</html>

转载：https://blog.csdn.net/qq_39357822/article/details/106456344

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

Vue项目开发（路由、重定向、路由参数、动态路由匹配、编程式导航、路由嵌套）

一、路由

明确需求

语法

小试牛刀（老语法）

小试牛刀（简化语法）

小总结

明确需求

语法

三、HTML5 History 模式(重理解)

明确需求

语法

练习

其他：前端路由简介&原理

小总结!!!

四、路由参数!!!

明确需求

语法

练习

五、动态路由匹配!!!

概念

明确需求

语法

小试牛刀

小总结

六、嵌套路由!!!

明确需求

语法

小试牛刀

小总结

七、命名视图!!

明确需求

语法

小试牛刀

应用场景

八、路由命名&编程式的导航!!!

铺垫

明确需求

语法

练习

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场