精华内容
下载资源
问答
  • Vue路由

    千次阅读 多人点赞 2020-12-09 21:19:13
    Vue路由Vue路由基础嵌套路由路由重定向路由传参params形式传参query形式传参params方式与query方式的区别编程式路由利用JS实现路由跳转通过watch实现路由监听导航守卫 Vue路由基础 Vue属于单页应用(SPA),即整个...

    Vue路由基础

    Vue属于单页应用(SPA),即整个应用程序中只有一个html页面。
    在单页应用中(SPA),由于只是更改DOM来模拟多页面,所以页面浏览历史记录的功能就丧失了。此时,就需要前端路由来实现浏览历史记录的功能。

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    
    
    	</head>
    	<body>
    		<div id="app">
    			<router-link to="/home">home</router-link>
    			<router-link to="/news">news</router-link>
    
    			<router-view></router-view>
    
    		</div>
    
    
    		<script>
    			const Home = {
    				template: '<div>首页</div>'
    			}
    			const News = {
    				template: '<div>新闻</div>'
    			}
    
    			var router = new VueRouter({
    				// mode: 'hash',
    				mode: 'history',
    				routes: [{
    					path: '/home',
    					component: Home
    				}, {
    					path: '/news',
    					component: News
    				}]
    			});
    
    
    
    			var vm = new Vue({
    				el: '#app',
    				data: {},
    				// 将路由添加到Vue中
    				router,
    			});
    		</script>
    
    	</body>
    </html>
    
    

    效果截图:

    点击home时:

    在这里插入图片描述

    点击new时:

    在这里插入图片描述

    嵌套路由

    实际应用界面,通常由多层嵌套的组件组合而成。 比如,我们 “新闻”组件中,还嵌套着 “国内”和 “国际”组件,那么URL对应就是/news/guonei和/news/guoji。
    样例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    
    
        </head>
        <body>
            <div id="app">
                <p>
                    <!-- 使用 router-link 组件来导航. to属性指定导航地址-->
                    <router-link to="/home">home</router-link>
                    <router-link to="/news">news</router-link>
                </p>
                <!-- 路由出口(路由匹配到的组件将渲染在这里) -->
                <router-view></router-view>
            </div>
    
    
            <script>
                // 1. 定义(路由)组件。
                const Home = {
                    template: `<div>首页</div>`
                }
    
                const News = {
                    template: `<div>
                        <p>
                            <router-link to="/news/guonei">国内新闻</router-link>
                            <router-link to="/news/guoji">国际新闻</router-link>
                        </p>
                        <router-view></router-view>
                    </div>`
                }
    
                const GuoNeiNews = {
                    template: `<div>这里显示国内新闻</div>`
                }
                const GuoJiNews = {
                    template: `<div>这里显示国际新闻。。。。</div>`
                }
    
                // 2. 定义路由规则对象(每个路由应该映射一个组件)
                const routes = [{
                        path: '/home',
                        component: Home,
                    }, {
                        path: '/news',
                        component: News,
                        children: [{
                                path: '/news/guonei',
                                component: GuoNeiNews
                            }, {
                                path: '/news/guoji',
                                component: GuoJiNews
                            }
    
                        ]
                    },
    
    
                ]
    
                // 3. 创建 router 实例,然后传 `routes` 配置
                const router = new VueRouter({
                    //如果路由规则对象名也为routes,那么就可以简写为 routes
                    routes: routes
                })
    
                var vm = new Vue({
                    el: '#app',
                    data: {},
                    // 将路由添加到Vue中
                    router,
                });
            </script>
    
        </body>
    </html>
    

    效果动图:
    在这里插入图片描述

    路由重定向

    路由重定向表示将你原来在转发列表中发向一台路由的路径改成另外一条路径,也就相当于让你的数据走另外一条路到服务器。

    样例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    
    
        </head>
        <body>
            <div id="app">
                <p>
                    <!-- 使用 router-link 组件来导航. to属性指定导航地址-->
                    <router-link to="/home">home</router-link>
                    <router-link to="/news">news</router-link>
                </p>
                <!-- 路由出口(路由匹配到的组件将渲染在这里) -->
                <router-view></router-view>
            </div>
    
    
            <script>
                // 1. 定义(路由)组件。
                const Home = {
                    template: `<div>首页</div>`
                }
    
                const News = {
                    template: `<div>
                        <p>
                            <router-link to="/news/guonei">国内新闻</router-link>
                            <router-link to="/news/guoji">国际新闻</router-link>
                        </p>
                        <router-view></router-view>
                    </div>`
                }
    
                const GuoNeiNews = {
                    template: `<div>这里显示国内新闻</div>`
                }
                const GuoJiNews = {
                    template: `<div>这里显示国际新闻。。。。</div>`
                }
    
    
                // 2. 定义路由规则对象(每个路由应该映射一个组件)
                const routes = [
                    /* {
                        path:'/',
                        redirect:'/home'
                    }, */
                    {
                        path: '/',
                        redirect: {
                            name: 'MyHome'
                        }
                    },
                    {
                        path: '/home',
                        name: 'MyHome',
                        component: Home,
                    }, {
                        path: '/news',
                        component: News,
                        children: [{
                                path: '/news/guonei',
                                component: GuoNeiNews
                            }, {
                                path: '/news/guoji',
                                component: GuoJiNews
                            }
    
    
                        ]
                    },
    
    
                ]
    
                // 3. 创建 router 实例,然后传 `routes` 配置
                const router = new VueRouter({
                    //如果路由规则对象名也为routes,那么就可以简写为 routes
                    routes: routes
                })
    
                var vm = new Vue({
                    el: '#app',
                    data: {},
                    // 将路由添加到Vue中
                    router,
                });
            </script>
    
        </body>
    </html>
    

    当我们访问#/时会自动帮我们跳转到#/home这也就是重定向。

    效果截图:
    在这里插入图片描述

    路由传参

    路由传参有多种方式,常用的有两种:params与query。

    params形式传参

    注意:

    • 使用v-bind绑定to属性。
    • to属性的值是一个json对象,此对象有两个属性:name属性和params属性。
    • name属性就是要路由的对象。所以,在路由规则列表中,每一个路由规则都应用有一个name值。
    • params属性就是要传递的参数。也是一个json对象。
    • 组件接收参数时,使用 this.$route.params.参数名 的形式。

    样例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    
    
        </head>
        <body>
            <div id="app">
                <p>
                    <router-link :to="{name:'News',params:{msg:'国内'}}">点击这里会把国内传过去</router-link>
                </p>
    
                <router-view></router-view>
            </div>
    
    
            <script>
                const News = {
                    data(){
                        return {
                            msg:''
                        }
                    },
                    template: `<div> {{msg}}新闻</div>`,
                    created(){
                        this.msg = this.$route.params.msg;
                        console.log(this.$route.params)
                    }
                }
    
    
                // 2. 定义路由规则对象(每个路由应该映射一个组件)
                const routes = [
                    {
                        path: '/news',
                        name: 'News',
                        component: News,
                    }
                ]
    
                // 3. 创建 router 实例,然后传 `routes` 配置
                const router = new VueRouter({
                    //如果路由规则对象名也为routes,那么就可以简写为 routes
                    routes: routes
                })
    
                var vm = new Vue({
                    el: '#app',
                    data: {},
                    // 将路由添加到Vue中
                    router,
                });
            </script>
    
        </body>
    </html>
    

    效果动图:
    在这里插入图片描述

    query形式传参

    注意:

    • to属性的值仍然是一个json对象,但是两个属性变了,一个是path,一个是query。
    • path属性就是路由地址,对应路由规则中的path值。
    • query属性就是要传递的参数。也是一个json对象。
    • 组件接收参数时,使用 this.$route.query.参数名 的形式。

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    		    <p>
    		        <router-link :to="{path:'/home',query:{msg:'hello world!'}}">home</router-link>
    		        <router-link :to="{path:'/news',query:{id:id,name:name}}">news</router-link>
    		    </p>
    		    <router-view></router-view>
    		</div>
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    		
    		<script type="text/javascript">
    		    const Home = {
    		        template: '<div>首页内容: {{this.$route.query.msg}} </div>'
    		    }
    		    const News = {
    		        template: `<div>新闻 </br>
    		                        参数id:{{this.$route.query.id}}</br>
    		                        参数name:{{this.$route.query.name}}
    		                    </div>`
    		    }
    		
    		    const routes = [{
    		        path: '/home',
    		        component: Home
    		    }, {
    		        path: '/news',
    		        component: News
    		    }]
    		
    		    const router = new VueRouter({
    		        routes
    		    })
    		
    		    var vm = new Vue({
    		        el: '#app',
    		        data: {
    		            id:666,
    		            name:'Keafmd'
    		        },
    		        router
    		    })
    		</script>
    	</body>
    </html>
    
    

    效果动图:
    在这里插入图片描述

    params方式与query方式的区别

    query方式传值:
    在这里插入图片描述
    params方式传值:
    在这里插入图片描述

    总结:params方式与query方式的区别:

    1. query方式:
    • 类似于get方式,参数会在路由中显示,可以用做刷新后仍然存在的参数。
    • 利用路由规则中的path跳转。
    1. params方式:
    • 类似于post方式,参数不会在路由中显示,页面刷新后参数将不存在。
    • 利用路由规则中的name跳转。

    编程式路由

    利用JS实现路由跳转

    router-link标签可以实现页面超链接形式的路由跳转。但是实际开发中,在很多情况下,需要通过某些逻辑判断来确定如何进行路由跳转。也就是说:需要在js代码中进行路由跳转。此时可以使用编程式路由。

    1. 使用this.$router.push方法可以实现路由跳转,方法的第一个参数可为string类型的路径,或者可以通过对象将相应参数传入。
    2. 通过this.$router.go(n)方法可以实现路由的前进后退,n表示跳转的个数,正数表示前进,负数表示后退。
    3. 如果只想实现前进后退可以使用this.$router.forward()(前进一页),以及this.$router.back()(后退一页)。

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    		    <p>
    		        <button @click="toHome">首页</button>
    		        <button @click="toNews">新闻</button>
    		        <button @click="toLogin">登陆</button>
    		        <button @click="doForward1">前进</button>
    		        <button @click="doForward2">前进</button>
    		        <button @click="doBack1">后退</button>
    		        <button @click="doBack2">后退</button>
    		    </p>
    		    <router-view></router-view>
    		</div>
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    		
    		<script type="text/javascript">
    		    const Home = {
    		        template: '<div>首页</div>'
    		    }
    		    const News = {
    		        template: '<div>新闻</div>'
    		    }
    		    const Login = {
    		        template: '<div>登陆</div>'
    		    }
    		
    		    const routes = [{
    		        path: '/',
    		        component: Home
    		    }, {
    		        path: '/home',
    		        component: Home
    		    }, {
    		        path: '/news',
    		        component: News
    		    }, {
    		        path: '/login',
    		        component: Login
    		    }]
    		
    		    const router = new VueRouter({
    		        routes
    		    })
    		
    		    var vm = new Vue({
    		        el: '#app',
    		        data: {},
    		        router,
    		        methods:{
    		            toHome(){
    		                //无参数时,push方法中直接写路由地址
    		                this.$router.push('/home');
    		            },
    		            toNews(){
    		                //有参数时,push方法中写一个json对象
    		                this.$router.push({path:'/news',query:{name:'zhangsan'}});
    		            },
    		            toLogin(){
    		                this.$router.push('/login');
    		            },
    		            doForward1(){
    		                this.$router.forward();
    		            },
    		            doForward2(){
    		                this.$router.go(1);
    		            },
    		            doBack1(){
    		                this.$router.back();
    		            },
    		            doBack2(){
    		                this.$router.go(-1);
    		            }
    		        }
    		    })
    		</script>
    	</body>
    </html>
    
    

    效果动图:
    在这里插入图片描述

    通过watch实现路由监听

    通过watch属性设置监听$route变化,达到监听路由跳转的目的。
    在上面代码中添加watch监听:

    watch: {
        // 监听路由跳转。
        $route(newRoute, oldRoute) {
            console.log('watch', newRoute, oldRoute)
        }
    }
    

    完整代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    		    <p>
    		        <button @click="toHome">首页</button>
    		        <button @click="toNews">新闻</button>
    		        <button @click="toLogin">登陆</button>
    		        <button @click="doForward1">前进</button>
    		        <button @click="doForward2">前进</button>
    		        <button @click="doBack1">后退</button>
    		        <button @click="doBack2">后退</button>
    		    </p>
    		    <router-view></router-view>
    		</div>
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    		
    		<script type="text/javascript">
    		    const Home = {
    		        template: '<div>首页</div>'
    		    }
    		    const News = {
    		        template: '<div>新闻</div>'
    		    }
    		    const Login = {
    		        template: '<div>登陆</div>'
    		    }
    		
    		    const routes = [{
    		        path: '/',
    		        component: Home
    		    }, {
    		        path: '/home',
    		        component: Home
    		    }, {
    		        path: '/news',
    		        component: News
    		    }, {
    		        path: '/login',
    		        component: Login
    		    }]
    		
    		    const router = new VueRouter({
    		        routes
    		    })
    			
    			
    		
    		    var vm = new Vue({
    		        el: '#app',
    		        data: {},
    		        router,
    		        methods:{
    		            toHome(){
    		                //无参数时,push方法中直接写路由地址
    		                this.$router.push('/home');
    		            },
    		            toNews(){
    		                //有参数时,push方法中写一个json对象
    		                this.$router.push({path:'/news',query:{name:'zhangsan'}});
    		            },
    		            toLogin(){
    		                this.$router.push('/login');
    		            },
    		            doForward1(){
    		                this.$router.forward();
    		            },
    		            doForward2(){
    		                this.$router.go(1);
    		            },
    		            doBack1(){
    		                this.$router.back();
    		            },
    		            doBack2(){
    		                this.$router.go(-1);
    		            }
    		        },
    				watch: {
    				    // 监听路由跳转。
    				    $route(newRoute, oldRoute) {
    				        console.log('watch', newRoute, oldRoute)
    				    }
    				}
    		    })
    		</script>
    	</body>
    </html>
    
    

    效果动图:
    在这里插入图片描述

    导航守卫

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。 对此,vue-route 提供了实现导航守卫(navigation-guards)的功能。
    你可以使用 router.beforeEach 注册一个全局前置守卫:

    const router = new VueRouter({ ... })
    
    router.beforeEach((to, from, next) => {
        // ...
    })
    

    每个守卫方法接收三个参数:

    1. to:即将要进入的目标路由对象(去哪里),可以使用 to.path 获取即将要进入路由地址。
    2. from:当前导航正要离开的路由对象(从哪来),可以使用 from.path 获取正要离开的路由地址。
    3. next:一个函数,表示继续执行下一个路由。(如果没有next,将不会进入到下一个路由)。

    下面例子中实现了如下功能:

    1. 列举需要判断登录状态的 “路由集合”,当跳转至集合中的路由时,如果“未登录状态”,则跳转到登录页面。
    2. 当直接进入登录页面LoginPage时,如果“已登录状态”,则跳转到首页HomePage。

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box">
    		    <p>
    		        <router-link to="/home">home</router-link>
    		        <router-link to="/news">news</router-link>
    		        <router-link to="/music">music</router-link>
    		        <router-link to="/login">login</router-link>
    		    </p>
    		    <router-view></router-view>
    		</div>
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    		
    		<script type="text/javascript">
    		    const Home = {
    		        template: '<div>首页</div>'
    		    }
    		    const News = {
    		        template: '<div>新闻</div>'
    		    }
    		    const Music = {
    		        template: '<div>音乐</div>'
    		    }
    		    const Login = {
    		        template: '<div>登录</div>'
    		    }
    		
    		    const routes = [{
    		        path: '/',
    		        component: Home
    		    }, {
    		        path: '/home',
    		        component: Home
    		    }, {
    		        path: '/news',
    		        component: News
    		    }, {
    		        path: '/music',
    		        component: Music
    		    }, {
    		        path: '/login',
    		        component: Login
    		    }]
    		
    		    const router = new VueRouter({
    		        routes // (缩写)相当于 routes: routes
    		    })
    		
    		    var vm = new Vue({
    		        el: '#box',
    		        data: {},
    		        router
    		    })
    		
    		    // 添加全局路由守卫
    		    router.beforeEach((to, from, next) => {
    		        //创建守卫规则集合(这里表示'/news'与'/music'路径是需要权限验证的)
    		        const nextRoute = ['/news', '/music'];
    		        // 使用isLogin来模拟是否登录
    		        let isLogin = false;
    		        // let isLogin = true;
    		        // 判断to.path(要跳转的路径)是否是需要权限验证的
    		        if (nextRoute.indexOf(to.path) >= 0) {
    		            if (!isLogin) {
    		                router.push({
    		                    path: '/login'
    		                })
    		                location.reload(); //必须要有
    		            }
    		        }
    		        // 已登录状态;当路由到login时,跳转至home
    		        if (to.path === '/login') {
    		            if (isLogin) {
    		                router.push({
    		                    path: '/home'
    		                });
    		                location.reload();
    		            }
    		        }
    		        next(); //必须要有
    		    });
    		</script>
    	</body>
    </html>
    
    

    isLogin = false效果动图:
    在这里插入图片描述

    我们可以看出当我们点击 news 和 music 时,因为isLogin = false,所以会自动跳转到 login 界面。

    isLogin = true效果动图:
    在这里插入图片描述

    我们可以看出当我们点击 news 和 music 时,因为isLogin = true,所以会显示相应的界面。

    看完如果对你有帮助,感谢点赞支持!
    如果你是电脑端,看到右下角的 “一键三连” 了吗,没错点它[哈哈]

    在这里插入图片描述
    加油!

    共同努力!

    Keafmd

    展开全文
  • 主要给大家介绍了关于vue路由教程之静态路由的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue监控路由变化 vue路由配置

    千次阅读 2018-04-20 15:18:47
    vue路由带参数,路由有一个$route对象 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。 路由对象暴露了以下属性: $route.path ...

    在进行vue的开发中,有时候会出现路由及路由参数拼接乱套的问题,下面我针对我遇到的路由问题进行小小的阐述

    vue路由带参数,路由有一个$route对象

    在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。

    路由对象暴露了以下属性:

    • $route.path
      • 字符串,等于当前路由对象的路径,会被解析为绝对路径,如 “/home/news” 。
    • $route.params
      • 对象,包含路由中的动态片段和全匹配片段的键值对
    • $route.query 对象,包含路由中查询参数的键值对。
      • 例如,对于 /home/news/detail/01?favorite=yes ,会得到$route.query.favorite == ‘yes’ 。
    • $route.router
      • 路由规则所属的路由器(以及其所属的组件)。
    • $route.matched
      • 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
    • $route.name
      • 当前路径的名字,如果没有使用具名路径,则名字为空。

    在页面上添加以下代码,可以显示这些路由对象的属性:

    <div>
        <p>当前路径:{{$route.path}}</p>
        <p>当前参数:{{$route.params | json}}</p>
        <p>路由名称:{{$route.name}}</p>
        <p>路由查询参数:{{$route.query | json}}</p>
        <p>路由匹配项:{{$route.matched | json}}</p>
    </div>
    
    路由配置
    • 路由入口
     <!-- 使用 router-link 组件来导航. -->
     <!-- 通过传入 `to` 属性指定链接. -->
    
    //基本形式
     <router-link to="/foo">Go to Foo</router-link>
     <router-link to="/bar">Go to Bar</router-link>
     
    //带参数形式
    <router-link :to="{ path: '/news,params:{newsid:001}">新闻002</router-link>
    <router-link :to="{ path: '/news,query:{newsid:001}">新闻002</router-link>
    
    /*id是变量的时候,这么赋值*/
    <router-link :to="{ path: '/news/'+newsid}">新闻002</router-link>
    
    • 路由出口
     <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    
    一个组件中可以有多个组件组成,可以有多个router-view,
    比如页面主页顶部固定,侧边栏和中心部分不固定,分成两个组件来渲染
    写法:
    <router-view></router-view>
    <router-view name='a'></router-view>
    
    {
    	path: '/home',
    	components: {
    		default: HomeContainer,
    		a: GuideContainer
    	}
    }
    
    • 路由也有相对路径和绝对路径之说,加上/就是绝对路径,不带则是相对路径,在写子页面的时候,有时候直接用相对路径就行,根据需求必要时也可以重定向 redirect: ‘videos’
    //进入父组件的时候路径拼接完整,再在父组件的基础上更换子组件的时候,直接相对路径即可
    <router-link :to="{ path: '/personal/'+userid+'/videos'}"></router-link>
    <router-link to='funs'></router-link>
    
    //定义路由
     const routes = [
    	{ path: '/', redirect: '/home' },
    	{
    		path: '/personal/:id',
    		components: {
    			default: PersonalContainer,
    		    a: GuideContainer
    		},
    		beforeEnter: (to, from, next) => {
    			next()
    		},
    		children: [
    			{
    				path: '',
    				redirect: 'videos',
    				component: PvideosContainer
    			},{
    				path: 'videos',
    				component: PvideosContainer
    			},
    			{
    				path: 'funs',
    				component: PfunsContainer
    			}
    		]
    	  },
    ]
    
    那么,怎么监听路由的变化呢?

    使用 watch,观察路由,一旦发生变化便重新获取数据!

    <script>
        export default {
            data() {
                return {
                    data: {}
                }
            },
            methods: {
              fetchDate() {
              // 使用 axios获取数据
              ......
            },
            created() {
              // 组件创建完后获取数据,
              // 此时 data 已经被 observed 了
              this.fetchDate();
            },
            watch: {
              // 如果路由有变化,会再次执行该方法
              "$route": "fetchDate"
            }
        }
    </script>
    
    在组件中,通过 $route.params 来获取路由参数
    

    参考链接:
    https://www.cnblogs.com/fayin/p/6418950.html
    https://blog.csdn.net/github_26672553/article/details/54861608
    https://www.cnblogs.com/axl234/p/5899952.html

    展开全文
  • 主要介绍了解决vue路由name同名,路由重复的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue路由切换

    千次阅读 2018-11-08 23:58:28
    看了 好多关于 vue 路由切换的文章 都不太理想 , 自己花了点时间 研究下vue路由切换仅供大家参考,这个案例使用element-ui+vue-router实现 整体效果: 第一步 1. 在 components 目录下创建创建 routerTab ...

     

     

    看了 好多关于 vue 路由切换的文章 都不太理想 , 自己花了点时间 研究下vue的路由切换仅供大家参考,这个案例使用element-ui+vue-router实现

    整体效果:

    第一步

    1. 在 components 目录下创建创建 routerTab 文件夹
    2. 在 routerTab 目录下创建 A.vue,B.vue,C.vue 三个组件
    3. 在 routerTab 目录下创建 index.vue
    4. 在 routerTab 目录下创建 header.vue
    5. 在 routerTab 目录下创建 aside.vue

    目录结构:

    以下是 A.vue,B.vue,C.vue,header.vue 组件 

    <template>
      <div>
       A 组件
      </div>
    </template>
    <script>
    export default {
      name:"AComponent"
    }
    </script>
    <style>
    
    </style>
    
    
    <template>
      <div>
        B 组件
      </div>
    </template>
    <script>
    export default {
      name:"BComponent"
    }
    </script>
    <style>
    
    </style>
    
    
    <template>
      <div>
        C 组件
      </div>
    </template>
    <script>
    export default {
      name:"CComponent"
    }
    </script>
    <style>
    
    </style>
    
    
    <template>
     <h1 style="text-align:center"> 头部组件 </h1>
    </template>
    <script>
    export default {
      name:'header'
    }
    </script>
    <style>
    
    </style>
    

    第二步: 配置路由 , 在 router/index.js 添加以下代码

    {
          path: '/index',//  注意 / 代表根目录
          name: 'index',
          component: resolve => require(['@/components/routerTab/index.vue'],resolve), //懒加载组件
          children:[
            {
              path:'aaa', // A 组件
              component: resolve => require(['@/components/routerTab/A.vue'], resolve)
            },
            {
              path: 'bbb', // B 组件
              component: resolve => require(['@/components/routerTab/B.vue'],resolve)
            },
            {
              path: 'ccc', // C 组件
              component: resolve => require(['@/components/routerTab/C.vue'],resolve)
            }
          ]
        }

    第三步: 设置路由跳转

    <template>
      <el-menu
        default-active="2"
        :router="true">
        <!-- :router="true" 表示 启用 路由 所以 el-menu-item 中的 index 表示路由要切换到的页面  -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>侧边栏</span>
          </template>
          <!-- 这里 的 index 代表 要去的路由  -->
          <el-menu-item index="/index/aaa">A组件</el-menu-item>
          <el-menu-item index="/index/bbb">B组件</el-menu-item>
          <el-menu-item index="/index/ccc">C组件</el-menu-item>
        </el-submenu>
      </el-menu>
    </template>
    <script>
    export default {
      name:'aside'
    }
    </script>
    <style></style>

    第四步: 将所有组件整合 实现 点击时 加载对应组件

    <template>
    <!--  这里使用 element-ui 布局 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <Vheader></Vheader>
        </el-header>
    
        <el-container>
          <!-- 侧边栏 -->
          <el-aside width="200px">
            <Vaside></Vaside>
          </el-aside>
          <el-main>
          <!-- 主体 也是 点击侧边栏中选项 加载对应组件 -->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </template>
    <script>
    //  引入 头部组件 和 侧边栏组件
      import Vheader from "@/components/routerTab/header";
      import  Vaside from "@/components/routerTab/aside";
      export default {
        name: 'index',
        components: {
          Vheader,
          Vaside
        },
      }
    </script>
    <style>
    </style>

     

    展开全文
  • 主要给大家介绍了关于vue路由中前进后退的一些事儿,文中通过示例代码介绍的非常详细,对大家学习或者使用vue路由具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue路由配置

    万次阅读 2017-06-26 11:21:26
    项目基本手脚架搭建完毕后,建一个router...npm install vue-router vue-resource --save-dev(安装 vue 路由模块vue-router和网络请求模块vue-resource) import Vue from 'vue' import Router from 'vue-router'

    项目基本手脚架搭建完毕后,建一个router文件夹,里面配置一个index.js文件。

    文件内容:

    npm install vue-router vue-resource --save-dev(安装 vue 路由模块vue-router和网络请求模块vue-resource)

    import Vue from 'vue'
    import Router from 'vue-router'  (----引入路由---注释说明)
    import About from '@/components/about'(--这些需要引入的是components文件夹下面创建的一些模板---相对路径----about代表about.vue模块)
    import Home from '@/components/home'
    import Brand from '@/components/brand'
    import Company from '@/components/company'
    import Connect from '@/components/connect'
    import Main from '@/components/main'
    import Join from '@/components/join'
    import News from '@/components/news'
    import Products from '@/components/products'
    import son1 from '@/components/son1'
    import son2 from '@/components/son2'
    import list from '@/components/list'
    import newList from '@/components/newList'
    import culture from '@/components/culture'
    import certification from '@/components/certification'
    import zhuanjia from '@/components/zhuanjia'
    Vue.use(Router)  (--使用---)
    
    export default new Router({
      routes: [
        {
          path: '/main',
          name: 'main',
          component: Main
        },--------------------------------
        { path: '/',                      这里是路由重定向,比如页面加载时候进入首页
          redirect: '/main'                   (比如给路由一个选中后的样式为红色  那么这里就能用到了---.router-link-active{样式})
        },---------------------------------
        {---------------------这里是配置子路由
          path: '/brand',
          name: 'brand',
          component: Brand,
          children: [
            {
              path: '/',
              name: 'newList',
              component: newList
            },
            {
              path: '/brand/culture',
              name: 'culture',
              component: culture
            },
            {
              path: '/brand/certification',
              name: 'certification',
              component: certification
            },
            {
              path: '/brand/zhuanjia',
              name: 'zhuanjia',
              component: zhuanjia
            }
          ]
        },
        {
          path: '/about',
          name: 'about',
          component: About
        },
        {
          path: '/company',
          name: 'company',
          component: Company
        },
        {
          path: '/connect',
          name: 'connect',
          component: Connect
        },
        {
          path: '/home',
          name: 'home',
          component: Home
        },
        {
          path: '/join',
          name: 'join',
          component: Join,
          children: [
            {
              path: '/',
              name: 'son1',
              component: son1
            },
            {
              path: '/join/son2',
              name: 'son2',
              component: son2
            }
          ]
        },
        {
          path: '/list',
          name: 'list',
          component: list
        },
        {
          path: '/news',
          name: 'news',
          component: News
        },
        {
          path: '/products',
          name: 'products',
          component: Products
        }
      ]
    })
    
    接下来就是在每一个模块文件中加入这样的一句话暴露出去:
    <script>
    export default {
      name: 'about'  ---自定义模块名字
    }
    </script>
    在app中我们可以这样写:

    <template>
      <div id="app1" class="pagebox">
    	    <div style="clear:both;"></div>
    		<ul class="index-tap">
    			<li><router-link to="/main">首页<p></p></router-link></li>
    			<li><router-link to="/about">关于我们<p></p></router-link></li>
    			<li><router-link to="/products">产品专区<p></p></router-link></li>
    			<li><router-link to="/news">新闻资讯<p></p></router-link></li>
    		</ul>
    		<ul class="index-tap">
    			<li><router-link to="/company">企业风采<p></p></router-link></li>
    			<li><router-link to="/join">招商加盟<p></p></router-link></li>
    			<li><router-link to="/connect">联系我们<p></p></router-link></li>
    			<li><router-link to="/brand">品牌介绍<p></p></router-link></li>
    		</ul>
    		<div style="clear:both;"></div>
    		<router-view transition transition-mode="out-in"></router-view>
    		<div style="clear:both;"></div>
    		<ul class="index-footer clearx">
    			<li v-on:click="showph = !showph">电话</li>
    			<li v-on:click="showmap = !showmap">地图</li>
    			<li v-on:click="showd = !showd">分享</li>
    			<!-- JiaThis Button BEGIN -->
    			<transition name="slide-fade">
    			<div class="jiathis_style_32x32 share" v-show="showd">
    				<a class="jiathis_button_qzone"></a>
    				<a class="jiathis_button_tsina"></a>
    				<a class="jiathis_button_tqq"></a>
    				<a class="jiathis_button_weixin"></a>
    				<a class="jiathis_button_renren"></a>
    			</div>
    			</transition>
    	        <!-- JiaThis Button END -->
    	        <transition name="slide-fade">
    			<div class="share sharephone" v-show="showph">
    				18305452462
    			</div>
    			</transition>
    			<transition name="slide-fade">
    			<div class="share showmap" v-show="showmap">
    				<ditu></ditu>---------------------------------自定义模板
    			</div>
    			</transition>
    		</ul>
    		<div class="fuceng" v-if="showmap"></div>
      </div>
    </template>
    
    <script>
    import ditu from '@/components/home'
    export default {
      name: 'app',
      data () {
        return {
          search: '',
          showd: false,
          showph: false,
          showmap: false
        }
      },
      mounted () {
        this.init()
      },
      methods: {
        Search () {
          if (this.search !== '') {
            this.$router.push({
              path: '/list',
              query: {
                serInfo: this.search
              }
            })
          } else {
            alert('请输入搜索内容')
          }
        },
        init: function () {
          let url = 'http://v3.jiathis.com/code/jia.js'
          let script = document.createElement('script')
          script.setAttribute('src', url)
          document.getElementsByTagName('head')[0].appendChild(script)
        }
      },
      components: {
        ditu
      }
    }
    </script>
    
    




    展开全文
  • Vue路由默认子路由

    千次阅读 2019-09-24 10:42:35
    vue路由中,如果存在二级路由的话,那么该路由下的所有子路由默认都不会自己显示的,如果想要默认展示子路由的话就需要按照如下配置 routes: [ {path: '/system-settings', component: resolve => require(...
  • 主要介绍了vue路由缓存的几种实现方式,结合实例形式详细分析了vue.js路由缓存常见实现方式、使用技巧与操作注意事项,需要的朋友可以参考下
  • vue路由重定向示例

    千次阅读 2019-05-30 21:18:10
    vue路由重定向示例 如果是在根目录,则重定向到/goods {path: '/', redirect: '/goods'}
  • 主要介绍了vue路由拦截及页面跳转的设置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 路由的配置与页面切换

    千次阅读 2020-09-07 21:40:59
    vue 路由的配置与页面切换1.vue路由 1.vue路由 可以实现单页面应用。 实现步骤:
  • vue 路由跳转

    千次阅读 2018-05-03 11:32:26
    vue 路由跳转 方法1–声明式(标签跳转): &lt;router-link :to="index"&gt;&lt;/router-link&gt; 因为路由里面有id 如果路由里面没有id, 方法2-编程式( js跳转): ...
  • vue路由钩子

    千次阅读 2019-06-04 22:02:41
    vue路由钩子大致可以分为三类: 1.全局钩子 主要包括beforeEach和aftrEach, beforeEach函数有三个参数: to: router即将进入的路由对象 from: 当前导航即将离开的路由 next: Function,进行管道中的一个钩子,如果...
  • vue路由,路由传参(parmas,query)

    千次阅读 2019-12-22 19:48:26
    一、Vue路由基础用法: 1 .安装 npm install vue-router --save 2 .main.js中 //Vue路由:引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由:引入并创建组件 import BYHome from './...
  • Vue路由获取路由参数

    千次阅读 2018-09-05 23:55:00
    vue路由设置路由参数有2种方式: 1.通过query配置: &lt;router-link :to="{ name:'login',query:{id:1} }"&gt;登录&lt;/router-link&gt; 通过query配置的路径显示如下:   2.通过...
  • Vue路由之组件切换

    千次阅读 2019-03-05 15:28:57
    Vue路由之组件切换 今天我们来简单说一下Vue的路由实现组件之间的切换。 利用Vue的路由实现组件之间的切换,大致需要五步走: 导入Vue-router.js包 创建子组件 创建路由对象 把路由和我们的VM(view model)关联起来 ...
  • 【vue】vue路由传参的三种方式

    千次阅读 2018-10-22 10:30:13
    传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。 方式一:params 传参(显示参数) params 传参(显示参数)又可分为 ...
  • 主要介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue路由,路由嵌套,钩子函数

    千次阅读 2019-06-10 21:26:12
    vue路由 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些...
  • 【vue】vue路由缓存的几种方式

    千次阅读 2019-09-04 14:01:28
    下面就简单介绍几种 vue 路由缓存的几种方式。 1、全部缓存 <keep-alive> <router-view></router-view> </keep-alive> 直接用 keep-alive 标签包裹 router-vie...
  • Vue路由判断前进后退

    千次阅读 2019-08-08 19:22:40
    定义全局跳转和返回函数,直接“接管”Vue路由的前进和后退事件: //注册全局方法 Vue.prototype.push = (url: string, closeTransition: boolean = false) => { //前进 Vue.prototype.transitionName ...
  • 今天小编就为大家分享一篇关于vue路由缓存清除在main.js中的设置,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 路由钩子函数

    千次阅读 2019-05-13 11:22:08
    vue路由钩子大致可以分为三类: 1.全局钩子 主要包括beforeEach和aftrEach, beforeEach函数有三个参数: to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子,如果执行...
  • vue路由跳转传参乱码解决

    千次阅读 2019-12-09 11:29:41
    vue路由组件跳转传参中文乱码解决 -在路由传参this.$router.push("/index?uname=xxx") 在下一个页面加载时截取导航栏中的参数 用location.href截取到导航栏 再用截取或者正则截取,我用的是截取中的split方法 下一个...
  • url重定向,vue路由重定向,vue路由守卫

    千次阅读 2018-10-24 19:46:03
    Vue里面也有知识点与url重定向的一致,就是路由重定向.它定义了页面一开始就可以显示的内容. 语法: 下面的代码意思是,页面一来就显示goodlist的页面,利用了路由重定向的语法 const router = new Vue...
  • vue 路由懒加载 resolve vue-router配置

    千次阅读 2020-06-20 16:04:39
    vue 路由懒加载 resolve vue-router配置 使用方法1: 这是异步加载代码的旧写法. 1 component:resolve => require(['@/pages/About'],resolve)//"@"相当于".." 使用方法2: 你可以改写...
  • Vue路由传参的几种方式

    万次阅读 多人点赞 2018-07-28 23:52:40
    前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效。传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。 ...
  • vue路由过渡效果

    千次阅读 2018-03-26 17:19:35
    vue路由过渡效果 //html结构 <router-view></router-view> </transition> //css样式 .fade-enter-active, .fade-leave-active {

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 128,354
精华内容 51,341
关键字:

vue路由

vue 订阅