Vue 路由

最新推荐文章于 2024-07-02 00:00:00 发布
最新推荐文章于 2024-07-02 00:00:00 发布
阅读量57 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55730147/article/details/130181638
版权

路由的query参数

  1. 传递参数

     <!-- 跳转并携带query参数，to的字符串写法 -->
 <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
 
 <!-- 跳转并携带query参数，to的对象写法 -->
 <router-link
 	:to="{
 		path:'/home/message/detail',
 		query:{
 				id:666,
 				title:'你好'
 		}
 	}"
 	>
 	跳转
 </router-link>

  2. 接收参数:

     $route.query.id
 $route.query.title

案例

  • main.js
import Vue from 'vue'
import App from './App.vue'

// 引入VueRouter
import VueRouter from 'vue-router'

// 引入路由器
import router from './router'
Vue.config.productionTip = false

// 应用插件
Vue.use(VueRouter)
new Vue({
    render: h => h(App),
    router: router
}).$mount('#app')
  • App.vue
<template>
  <div>
    <div class="row">
      <Banner />
    </div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-2">
        <div class="list-group">
          <router-link
            to="./about"
            class="list-group-item"
            active-class="active"
            >About</router-link
          >
          <router-link to="./home" class="list-group-item" active-class="active"
            >Home</router-link
          >
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner";
export default {
  name: "App",
  components: { Banner },
};
</script>
  • router文件夹
    index.js
// 该文件用于创建整个应用的路由器

// 引入VueRouter
import VueRouter from 'vue-router'

// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News,
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            path: 'detail',
                            component: Detail,
                        }
                    ]
                }
            ]
        },
    ]
})

  • pages文件夹

    • About.vue
    <template>
	<div>
		<h2>我是About的内容</h2>
	</div>
</template>

<script>
export default {
	name: "About",
};
</script>
    • Home.vue
    <template>
	<div>
		<h2>我是Home的内容</h2>
		<div>
  			<h2>Home组件内容</h2>
  			<div>
   	 		<ul class="nav nav-tabs">
      			<li>
        		<router-link
          			to="/home/news"
          			class="list-group-item"
          			active-class="active"
        			>
          			News
        			</router-link>
      			</li>
      			<li>
        		<router-link
          		to="/home/message"
          		class="list-group-item"
          		active-class="active"
        		>
          		Message
        		</router-link>
      			</li>
    		</ul>
    		<router-view></router-view>
  		</div>
	</div>
</div>
</template>

<script>
export default {
	name: "Home",
};
</script>
    • Message.vue
    <template>
	<div>
		<ul>
  			<li v-for="m in MessageList" :key="m.id">
    		<!-- 跳转路由并携带query参数，to的字符串写法  -->
    		<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->

    		<!-- 跳转路由并携带query参数，to的对象写法  -->
    		<router-link
      			:to="{
        			path: '/home/message/detail',
        			query: {
          				id: m.id,
          				title: m.title,
        			},
      			}"
    		>
      			{{ m.title }}
    		</router-link>
  		</li>
 	</ul>
 	<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: "Message",
		data() {
			return {
  				MessageList: [
    				{ id: "001", title: "消息001" },
    				{ id: "002", title: "消息002" },
    				{ id: "003", title: "消息003" },
  				],
			};
		},
	};
</script>
    • News.vue
    	<template>
		<ul>
			<li>news001</li>
			<li>news002</li>
			<li>news003</li>
		</ul>
	</template>

	<script>
	export default {
		name: "News",
	};
</script>
    • Detail.vue
    <template>
	<ul>
		<li>消息编号：{{ $route.query.id }}</li>
		<li>消息标题：{{ $route.query.title }}</li>
	</ul>
</template>

<script>
export default {
	name: "Detail",
};
</script>

  • components文件夹
    Bannet.vue

    <template>
	<div>
		<div class="col-xs-offset-2 col-xs-8">
  			<div class="page-header">
    			<h2>Vue Router Demo</h2>
  			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Banner",
	};
</script>

命名路由

作用:

可以简化路由的跳转

如何使用

  1. 给路由命名

     {
 	path :' /demo'
 	component:Demo ,
 	children:[
 		{
 			path:'test',
 			component:Test,
 			children:[
 				{
 					name:'hello',    //给路由命名
 					path:'welcome',
 					component :Hel1o
 				}
 			]
 		}
 	]
 }

  2. 简化跳转

     <!--简化前，需要写完整的路径 -->
 <router-link to="/demo/test/welcome">跳转</router-link>
 
 <!--简化后，直接通过名字跳转 -->
 <router-link :to="{name:' hello'}">跳转</router-link>
 
 <!--简化写法配合传递参数-->
 <router-link
 	:to="{
 		name: ' hello',
 		query:{
 			id:666,
 			title:'你好'
 		}
 	}"
 >跳转</router-link>

路由的params参数

  1. 配置路由，声明接收params参数

     {
 	path:' /home',
 	component:Home,
 	children:[
 		{
 			path:'news',
 			component:News,
 		},
 		{
 			path:'message',
 			component:Message,
 			children:[
 					{
 						name:'xiangqing',
 						path:'detail/:id/:title’，//使用占位符声明接收params参数
 						component:Detail
 					}
 			]
 		}
 	]
 }

  2. 传递参数

     <!-- 跳转并携带params参数，to的字符串写法 -->
 <router-link :to="/home/message/detail/666/你好”跳转</router-link>
 
 <!-- 跳转并携带params参数，to的对象写法 -->
 <router-link
 	:to="{
 		name: 'xiangqing',
 		params:{
 			id:666,
 			title:'你好'
 		}
 	}"
 >跳转</router-link>

注: 路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置!

  1. 接收参数:

     $route.params.id$route.params.title
案例：
  • main.js
import Vue from 'vue'
import App from './App.vue'

// 引入VueRouter
import VueRouter from 'vue-router'

// 引入路由器
import router from './router'
Vue.config.productionTip = false

// 应用插件
Vue.use(VueRouter)
new Vue({
    render: h => h(App),
    router: router
}).$mount('#app')
  • App.vue
<template>
  <div>
    <div class="row">
      <Banner />
    </div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-2">
        <div class="list-group">
          <router-link
            to="./about"
            class="list-group-item"
            active-class="active"
            >About</router-link
          >
          <router-link to="./home" class="list-group-item" active-class="active"
            >Home</router-link
          >
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner";
export default {
  name: "App",
  components: { Banner },
};
</script>
  • router文件夹
    index.js
// 该文件用于创建整个应用的路由器

// 引入VueRouter
import VueRouter from 'vue-router'

// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News,
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xq',
                            path: 'detail/:id/:title',
                            component: Detail,
                        }
                    ]
                }
            ]
        },
    ]
})

  • pages文件夹

    • About.vue
    <template>
	<div>
		<h2>我是About的内容</h2>
	</div>
</template>

<script>
export default {
	name: "About",
};
</script>
    • Home.vue
    <template>
	<div>
		<h2>我是Home的内容</h2>
		<div>
  			<h2>Home组件内容</h2>
  			<div>
   	 		<ul class="nav nav-tabs">
      			<li>
        		<router-link
          			to="/home/news"
          			class="list-group-item"
          			active-class="active"
        			>
          			News
        			</router-link>
      			</li>
      			<li>
        		<router-link
          		to="/home/message"
          		class="list-group-item"
          		active-class="active"
        		>
          		Message
        		</router-link>
      			</li>
    		</ul>
    		<router-view></router-view>
  		</div>
	</div>
</div>
</template>

<script>
export default {
	name: "Home",
};
</script>
    • Message.vue
    <template>
	<div>
		<ul>
  			<li v-for="m in MessageList" :key="m.id">
    		<!-- 跳转路由并携带params参数，to的字符串写法  -->
    		<!-- <router-link :to="`/home/message/detail/id=${m.id}/$title=${m.title}`">{{ m.title }}</router-link> -->

    		<!-- 跳转路由并携带params参数，to的对象写法 -->
    		<router-link
      			:to="{
        			name: 'xq',
       	 			params: {
          				id: m.id,
          				title: m.title,
        			},
      			}"
      		>{{ m.title }}</router-link>
  		</li>
 	</ul>
 	<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: "Message",
		data() {
			return {
  				MessageList: [
    				{ id: "001", title: "消息001" },
    				{ id: "002", title: "消息002" },
    				{ id: "003", title: "消息003" },
  				],
			};
		},
	};
</script>
    • News.vue
    	<template>
		<ul>
			<li>news001</li>
			<li>news002</li>
			<li>news003</li>
		</ul>
	</template>

	<script>
	export default {
		name: "News",
	};
</script>
    • Detail.vue
    <template>
	<ul>
		<li>消息编号：{{ $route.query.id }}</li>
		<li>消息标题：{{ $route.query.title }}</li>
	</ul>
</template>

<script>
export default {
	name: "Detail",
};
</script>

  • components文件夹
    Bannet.vue

    <template>
	<div>
		<div class="col-xs-offset-2 col-xs-8">
  			<div class="page-header">
    			<h2>Vue Router Demo</h2>
  			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Banner",
	};
</script>

路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,
	
	// props的第一种写法，值为对象，该对象中所有key-value都会以props的形式传给Detail组件
    // props: {a:1}

	// props的第二种写法，值为布尔值，若布尔值为真，就会把该组件收到的所有params参数，以props的形式传给Detail组件
    // props: true

    // props的第三种写法，值为函数
         props($route) {
               return {
                    id: $route.query.id, title: $route.query.title
                }
         }
}

案例：

  • main.js
import Vue from 'vue'
import App from './App.vue'

// 引入VueRouter
import VueRouter from 'vue-router'

// 引入路由器
import router from './router'
Vue.config.productionTip = false

// 应用插件
Vue.use(VueRouter)
new Vue({
    render: h => h(App),
    router: router
}).$mount('#app')
  • App.vue
<template>
  <div>
    <div class="row">
      <Banner />
    </div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-2">
        <div class="list-group">
          <router-link
            to="./about"
            class="list-group-item"
            active-class="active"
            >About</router-link
          >
          <router-link to="./home" class="list-group-item" active-class="active"
            >Home</router-link
          >
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner";
export default {
  name: "App",
  components: { Banner },
};
</script>
  • router文件夹
    index.js
// 该文件用于创建整个应用的路由器

// 引入VueRouter
import VueRouter from 'vue-router'

// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News,
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xq',
                            path: 'detail/:id/:title',
                            component: Detail,
                            // props的第一种写法，值为对象，该对象中所有key-value都会以props的形式传给Detail组件
                            // props: {a:1}

                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该组件收到的所有params参数，以props的形式传给Detail组件
                            // props: true

                            // props的第三种写法，值为函数
                            props($route) {
                                return {
                                    id: $route.query.id, title: $route.query.title
                                }
                            }
                        }
                    ]
                }
            ]
        },
    ]
})

  • pages文件夹

    • About.vue
    <template>
	<div>
		<h2>我是About的内容</h2>
	</div>
</template>

<script>
export default {
	name: "About",
};
</script>
    • Home.vue
    <template>
	<div>
		<h2>我是Home的内容</h2>
		<div>
  			<h2>Home组件内容</h2>
  			<div>
   	 		<ul class="nav nav-tabs">
      			<li>
        		<router-link
          			to="/home/news"
          			class="list-group-item"
          			active-class="active"
        			>
          			News
        			</router-link>
      			</li>
      			<li>
        		<router-link
          		to="/home/message"
          		class="list-group-item"
          		active-class="active"
        		>
          		Message
        		</router-link>
      			</li>
    		</ul>
    		<router-view></router-view>
  		</div>
	</div>
</div>
</template>

<script>
export default {
	name: "Home",
};
</script>
    • Message.vue
    <template>
	<div>
		<ul>
  			<li v-for="m in MessageList" :key="m.id">
    		<!-- 跳转路由并携带params参数，to的字符串写法  -->
    		<!-- <router-link :to="`/home/message/detail/id=${m.id}/$title=${m.title}`">{{ m.title }}</router-link> -->

    		<!-- 跳转路由并携带params参数，to的对象写法 -->
    		<router-link
      			:to="{
        			name: 'xq',
       	 			query: {
          				id: m.id,
          				title: m.title,
        			},
      			}"
      		>{{ m.title }}</router-link>
  		</li>
 	</ul>
 	<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: "Message",
		data() {
			return {
  				MessageList: [
    				{ id: "001", title: "消息001" },
    				{ id: "002", title: "消息002" },
    				{ id: "003", title: "消息003" },
  				],
			};
		},
	};
</script>
    • News.vue
    	<template>
		<ul>
			<li>news001</li>
			<li>news002</li>
			<li>news003</li>
		</ul>
	</template>

	<script>
	export default {
		name: "News",
	};
</script>
    • Detail.vue
    <template>
	<ul>
		<li>消息编号：{{ id }}</li>
		<li>消息标题：{{ title }}</li>
	</ul>
</template>

<script>
export default {
	name: "Detail",
	props: ["id", "title"],
};
</script>

  • components文件夹
    Bannet.vue

    <template>
	<div>
		<div class="col-xs-offset-2 col-xs-8">
  			<div class="page-header">
    			<h2>Vue Router Demo</h2>
  			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Banner",
	};
</script>
掉头不要太快了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 路由id_vue路由详解
weixin_33518100的博客
12-23 2757
自己看vue文档，难免有些地方不懂，自己整理一下，主要是vue-router具体实现的操作步骤。安装直接下载/CDNUnpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像在 Vue 后面加载 vue-router，它会自动安装的：NPMnpm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use()...
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
Vue路由
热门推荐
qq_45799465的博客
03-26 2万+
路由的概念，路由的实现，路由的模式，声明式导航，编程式导航，路由重定向，404路由，嵌套路由，动态路由，路由的传参方式，
Vue 路由的基本使用
Errol's Blog
04-14 4216
文章目录路由的理解路由的基本使用一些注意点 路由的理解 生活中的路由： vue-router的理解： vue 的一个插件库，专门用来实现SPA应用(single page web application) 对SPA应用的理解： 1.单页Web应用(single page web application，SPA) 2.整个应用只有一个完整的页面 3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新 4.数据需要通过ajax请求获取 什么是路由? 1.—个路由就是一组映射关系 (key - value
vue路由配置
m0_57108418的博客
07-07 2万+
二、配置路由 在根目录下创建文件夹router，在router文件夹下创建index.js文件，如下图所示在index.js文件中写入如下代码，实现创建一个路由器 如上图，配置好了一个路由器，里面包含了2个路由，分别为student，school 路由在跟目录下创建view或者page文件夹，创建student，school两个路由（vue文件），如下图 在main.js中注册路由 编辑student.vue路由 编辑school.vue路由 在app.vue中进行路由的使用 四、效
vue路由传值
weixin_48879122的博客
09-21 5069
本篇文章讲述了vue路由传值的方法和区别;
Vue路由拦截
aliyun3的博客
04-17 1万+
vue中鉴权的两种方法 常用的鉴权有两种：一种是路由拦截，一种是动态路由。 路由拦截 通过vue-router的beforeEach方法进行每一次路由访问的拦截，判断拦截信息中是否有鉴权要求或者权限校验，以此来实现鉴权。 如果权限不够，访问的路径虽然存在但会被拦截。 动态路由 在登录后根据用户信息以及权限动态地添加正确的权限路由，如果权限不够，访问的路径是不存在的。 比较 路由拦截实现起来相对简单，只需在登录的时候保存用户权限信息，然后编写路由的时候将需要鉴权的路由加上权限信息，然后在
Vue 路由重定向
Seric_xiao的博客
09-23 2万+
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面； 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向： var router = new VueRouter({ routes: [ // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的
vue 路由钩子
GXY1551705593的博客
10-19 4927
路由守卫分为三种 ——分别是：全局路由守卫、组件路由守卫、独享路由守卫。
Vue 路由钩子
bangbDIV的博客
09-14 8362
路由钩子分为三种： 全局钩子：beforeEach、 afterEach、beforeResolve 单个路由里面的钩子： beforeEnter 组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 全局钩子： beforeEach：全局前置守卫 进入路由之前 beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 afterEach 全局后置钩子 进入路由之后 路由...
vue 路由
01-08
vue 路由 什么是路由 后端路由： 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 前端路由： 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，...
vue路由传参 vue路由传参
11-18
vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
vue路由切换时取消之前的所有请求操作
10-14
本文将详细讲解如何在Vue路由切换时取消之前的所有请求操作。 首先，我们需要了解Vue的`beforeEach`钩子函数，它是在每次路由切换前都会执行的全局守卫。我们可以在`main.js`文件中注册这个钩子，以确保在进入新的...
创建一个vue3+vite+ts项目
m0_56885551的博客
06-29 469
新建一个vue3+vite+tsx项目
vue3插槽的使用
qq_47040462的博客
06-28 431
作用域插槽可以接收来自子组件的数据，使插槽内容能基于这些数据动态变化。默认插槽是最基本的形式，用于插入任何未明确命名的内容。通过合理使用插槽，你可以设计出高度可复用和灵活的组件。具名插槽允许你有选择性地插入内容到组件的特定位置。
前端利用vue如何实现导入和导出功能.md
最新发布
BradenHan的专栏
07-02 916
xlsx/TOC。
查看VUE中安装包依赖的版本号
fangcaojushi的博客
06-28 348
使用 npm list --depth=2 命令可以列出项目中直接依赖的包及其版本，以及间接依赖的包的最新版本和实际安装的版本。使用 npm list --depth=1 命令可以列出项目中直接依赖的包及其版本，以及间接依赖的包的最新版本。使用 npm ls 命令可以列出项目中所有已安装的依赖包及其版本。
Element-UI表单验证 二选一、三选一、多选一验证
Williamqin_的博客
06-27 241
在表单提交过程中很多时候要用到几个表单项二选一验证或多选一验证，比如联系方式中的手机号和固定电话只需要填写一项就可通过验证，针对这样情况可以使用Element-UI的自定义验证实现，具体实现方法如下。
vue路由
05-25
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。使用 Vue Router ，我们可以实现单页面应用中的路由跳转、参数传递、路由拦截等功能。下面是 Vue Router 的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值