vue路由

千次阅读 多人点赞 2020-12-09 21:19:13

Vue路由Vue路由基础嵌套路由路由重定向路由传参params形式传参query形式传参params方式与query方式的区别编程式路由利用JS实现路由跳转通过watch实现路由监听导航守卫 Vue路由基础 Vue属于单页应用（SPA），即整个...


Vue路由
Vue路由基础
嵌套路由
路由重定向
路由传参
params形式传参
query形式传参
params方式与query方式的区别
编程式路由
利用JS实现路由跳转
通过watch实现路由监听
导航守卫

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方式的区别：

query方式：


类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。
利用路由规则中的path跳转。


params方式：


类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。
利用路由规则中的name跳转。


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

使用this.$router.push方法可以实现路由跳转，方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。
通过this.$router.go(n)方法可以实现路由的前进后退，n表示跳转的个数，正数表示前进，负数表示后退。
如果只想实现前进后退可以使用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) => {
    // ...
})


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

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


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

列举需要判断登录状态的 “路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面。
当直接进入登录页面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 html

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路由切换

千次阅读 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路由默认子路由

2019-09-24 10:42:35

在vue路由中，如果存在二级路由的话，那么该路由下的所有子路由默认都不会自己显示的，如果想要默认展示子路由的话就需要按照如下配置 routes: [ {path: '/system-settings', component: resolve => require(...


在vue路由中，如果存在二级路由的话，那么该路由下的所有子路由默认都不会自己显示的，如果想要默认展示子路由的话就需要按照如下配置

routes: [
		{path: '/system-settings', component: resolve => require(['./components/systemSettings/index.vue'], resolve), meta: {title: '系统设置'}, children: [
			{path: '/', component: resolve => require(['./components/systemSettings/info.vue'], resolve), name: '系统信息', meta: {title: '系统设置'}},
		]},

此时当进入到/system-settings时子路由位置将默认展示/的内容

注意：父路由不需要设置name属性

收起

展开全文

Vue路由vue-router
千次阅读 2018-03-29 10:55:19
前面的话　在Web开发中，路由是指根据URL分配到对应的处理程序。...本文将详细介绍Vue路由vue-router 安装　在使用vue-router之前，首先需要安装该插件npm install vue-router　如果在一个模块化工程中...
收起
vue路由跳转监听
2019-09-24 15:00:38
vue路由跳转监听
收起
Vue动画和 Vue路由
千次阅读 2017-04-27 09:18:55
Vue动画和 Vue路由一.transition： Vue1.0: <p transition="fade"></p>.fade.transition{} .fade-enter{} .fade-leave{} (一).Vue2.0以后，transition组件运动的内容(元素，属性,路由...)
收起
vue路由登录拦截
2019-06-04 17:40:10
vue路由 vue路由文件的基本格式 import Vue from 'vue'; import Router from 'vue-router'; import HomePage from './views/Home/HomePage.vue'; // 正常引入组件 const HomePage = () => import('./views/Home...
收起
前端
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'
收起
vue路由钩子
千次阅读 2019-06-04 22:02:41
vue路由钩子大致可以分为三类: 1.全局钩子主要包括beforeEach和aftrEach, beforeEach函数有三个参数： to: router即将进入的路由对象 from: 当前导航即将离开的路由 next: Function,进行管道中的一个钩子，如果...
收起
Vue路由获取路由参数
2018-09-05 23:55:00
vue路由设置路由参数有2种方式： 1.通过query配置： <router-link :to="{ name:'login',query:{id:1} }">登录</router-link> 通过query配置的路径显示如下： 2.通过...
收起
vue 路由的配置与页面切换
千次阅读 2020-09-07 21:40:59
vue 路由的配置与页面切换1.vue路由 1.vue路由可以实现单页面应用。实现步骤：
收起
vue 路由跳转
千次阅读 2018-05-03 11:32:26
vue 路由跳转方法1–声明式（标签跳转）： <router-link :to="index"></router-link> 因为路由里面有id 如果路由里面没有id，方法2-编程式（ js跳转）： ...
收起
vue路由学习-路由是什么
2019-06-21 17:31:39
有关vue路由的学习过程开发工具：vscode 事先准备：利用脚手架构建模板实例，具体构建过程可参考官方文档 https://cli.vuejs.org/zh/. （之后会补上cli脚手架的构建过程） 1. 路由介绍路由安装指令：npm install ...
收起
前端 JavaScript
vue路由，路由嵌套，钩子函数
千次阅读 2019-06-10 21:26:12
vue路由 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些...
收起
vue路由重定向示例
千次阅读 2019-05-30 21:18:10
vue路由重定向示例如果是在根目录，则重定向到/goods {path: '/', redirect: '/goods'}
收起
Vue路由篇之动态路由匹配
2020-04-07 08:55:59
Vue路由篇之动态路由匹配详情请见注释 <style> .active{ font-size: 100px; color:red } </style> <div id="app"> <ul> <router-link tag='...
收起
Vue 路由钩子函数
千次阅读 2019-05-13 11:22:08
vue路由钩子大致可以分为三类: 1.全局钩子主要包括beforeEach和aftrEach, beforeEach函数有三个参数： to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子，如果执行...
收起
【vue】vue路由传参的三种方式
千次阅读 2018-10-22 10:30:13
传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。方式一：params 传参（显示参数） params 传参（显示参数）又可分为 ...
收起
vue vue-route
Vue路由之组件切换
千次阅读 2019-03-05 15:28:57
Vue路由之组件切换今天我们来简单说一下Vue的路由实现组件之间的切换。利用Vue的路由实现组件之间的切换，大致需要五步走：导入Vue-router.js包创建子组件创建路由对象把路由和我们的VM(view model)关联起来 ...
收起
Vue路由判断前进后退
千次阅读 2019-08-08 19:22:40
定义全局跳转和返回函数，直接“接管”Vue路由的前进和后退事件： //注册全局方法 Vue.prototype.push = (url: string, closeTransition: boolean = false) => { //前进 Vue.prototype.transitionName ...
收起
vue路由router的使用与搭建
万次阅读 2019-05-29 09:47:31
vue路由router的使用与搭建前端路由 hash值方式#/id不会向服务器发起请求，根据hash值的改变，对应渲染不同的前端组件 history方式无#号 router配置 import Vue from 'vue' VUe.use(ROuter) ...
收起
基础
Vue 路由跳转以及多级嵌套
千次阅读 2019-05-05 14:58:46
点击跳转：Vue路由跳转以及嵌套
收起
vue 路由跳转方式及路由传参
千次阅读 2019-02-23 14:58:44
一、vue 路由跳转方式 1、声明式跳转（标签跳转）: router-link api: // 1.to { string | Location } 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是...
收起
Vue路由传参的几种方式
万次阅读 多人点赞 2018-07-28 23:52:40
前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。 ...
收起
params传参 query传参
vue路由，解决同一路由页面多次触发不刷新页面【vue开发】
2018-09-28 15:58:00
vue路由，解决同一路由页面多次触发不刷新页面【vue开发】 vue路由的机制是这样的：不同的路由vue会刷新并跳转到相应路由，但如果是下一个点击触发的还是当前路由则当前路由页面不会被刷新 ...
收起

Vue路由

Vue路由

Vue路由基础

嵌套路由

路由重定向

路由传参

params形式传参

query形式传参

params方式与query方式的区别

编程式路由

利用JS实现路由跳转

通过watch实现路由监听

导航守卫

vue监控路由变化 vue路由配置

路由配置

那么，怎么监听路由的变化呢？

vue路由切换

Vue路由默认子路由

Vue路由vue-router

vue路由跳转监听

Vue动画 和 Vue路由

vue路由登录拦截

vue路由配置

vue路由钩子

Vue路由获取路由参数

vue 路由的配置与页面切换

vue 路由跳转

vue路由学习-路由是什么

vue路由，路由嵌套，钩子函数

vue路由重定向示例

Vue路由篇之动态路由匹配

Vue 路由钩子函数

【vue】vue路由传参的三种方式

Vue路由之组件切换

Vue路由判断前进后退

vue路由router的使用与搭建

Vue 路由跳转以及多级嵌套

vue 路由跳转方式及路由传参

Vue路由传参的几种方式

vue路由，解决同一路由页面多次触发不刷新页面【vue开发】

vue路由

flutter插件调用APP页面、使用原生aar,framework库

Excel高级图表技巧

python函数装饰器

造车新势力：电动不是目的，智能只是开始

交换链表中的相邻元素

Spring

Java无损导出及转换word文档

JavaSE08 IO流

常见设计模式的解析和实现(C++)共21种.UML类图+讲解

第1章 Java入门基础及环境搭建【java编程进阶】

【数据分析-随到随学】Hadoop数据分析

GJB150.4A-2009第4部分：低温试验.pdf

剑指 Offer 33.二叉搜索树的后序遍历序列

Chapter 19 .Identification and signatures from sigma protocols【基于sigma协议的身份认证和签名】

imread读图片失败

feign调用时因为请求头content-length调用失败

手势解锁-canvas-javascript实战

linux 下 Rstudio切换R版本（环境变量是一切的王道）

假设投资者A，他采用投资并持有的策略，在2018年1月1日后的第一个交易日，购买了5支股票，每支100万元。计算每个交易日A先生持有的每支股票市值情况并可视化，同时再计算每个交易日A先生投资组合的整体

GJB150.9A-2009第九部分：湿热试验.pdf

Vue动画和 Vue路由