29.Vue.js :路由重定向

路由重定向//第一种{name: 'default',path: '*',redirect: '/index'}//第二种{name: 'default',path: '*',redirect: {name: 'index'}<!DOCTYPE html><html lang="en"&gt...

这世界唯一的妳

16289人浏览 · 2019-03-27 11:38:13

这世界唯一的妳 · 2019-03-27 11:38:13 发布

路由重定向

//第一种
{
   name: 'default',
   path: '*',
   redirect: '/index'
 }

//第二种
{
   name: 'default',
   path: '*',
   redirect: {
   name: 'index'
   }

<!DOCTYPE html>
<html lang="en">

<head>
    <title>路由router</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <!-- 1.引入路由文件 -->
    <script src="./vue-router.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- vue路由中通过router-link去做跳转，它有一个to属性，to属性的值必须和
              path的路径相对应

              router-link将来会被渲染成为a标签，他的to属性会被渲染成a标签的href属性，
              但他的值前面会加一个#，变为锚点
             -->

            <li>
                <router-link to="/index">首页</router-link>
            </li>
            <li>
                <router-link to="/productType/11">水果</router-link>
            </li>

            <li>
                <router-link to="/productType/22">蔬菜</router-link>
            </li>
            <li>
                <router-link to="/productType/33">肉类</router-link>
            </li>
        </ul>
        <!-- 6.通过router-view挖坑，路径匹配到的组件都会渲染到这个坑里面来 -->
        <router-view></router-view>
    </div>
    <script>
        // 2.准备路由需要的文件
        var index = Vue.component('index', {
            template: '<div>首页</div>'
        })
        var cookBook = Vue.component('cookBook', {
            template: '<div>我这里有很多的食谱，欢迎查看</div>'
        })

        var productType = Vue.component('productType', {
            data() {
                return {
                    allProduct: ''
                }
            },
            // 在html 中获取路由参数 通过this.$route.params 参数名
            template: `
            <div>这里显示商品编号{{$route.params.id}}
            <p>{{allProduct}}<button @click='jumpTo'>查看食谱</button></p>
            <router-view></router-view>
            </div>`,
            methods: {
                jumpTo() {
                    //通过$router来跳转
                    this.$router.push({
                        name: 'cookBook'
                    })
                }
            },
            // 在js中获取路由参数通过this.$route.params.参数名
            mounted() {
                console.log(this.$route.params.id)
            },
            watch: {
                //to 表示你将要去的路由对象，from表示你从哪个路由对象来
                '$route' (to, from) {
                    if (to.params.id === '11') {
                        this.allProduct = '西瓜/香蕉/苹果'
                    } else if (to.params.id === '22') {
                        this.allProduct = '白菜/胡萝卜/香菇'
                    } else {
                        this.allProduct = '鸡肉/羊肉/鸭肉'
                    }
                }
            }
        })

        // 3.创建路由对象，在这个对象里面去配置路由规则
        var router = new VueRouter({
            // 4.通过routes属性配置路由规则，它是一个数组，数组中放的是对象，每个对象对应一条规则，并且每个对象里面都包含有name（表示路由规则的名称）/path（表示路径）/component（表示路径对应的组件）
            routes: [{
                    // 路由加参数的方法：参数名
                    // 嵌套路由的创建通过children属性，它是一个数组，数组中放的是对象，每个对象对应一条规则
                    name: 'index',
                    path: '/index',
                    component: index
                }, {
                    name: 'productType',
                    path: '/productType/:id',
                    component: productType,
                    children: [
                        //嵌套中的path不能加/
                        {
                            name: 'cookBook',
                            path: 'cook_book',
                            component: cookBook
                        }
                    ]
                },
                //路由重定向
                // {
                //     name: 'default',
                //     path: '*',
                //     redirect: '/index'
                // }, 
                {
                    name: 'default',
                    path: '*',
                    redirect: {
                        name: 'index'
                    }
                }
            ]
        })
        var vm = new Vue({
            el: '#app',
            // 5.在vue实例中注入路由，这样整个应用程序都会有路由了
            router,
            data: {

            }
        })
    </script>
</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^