金山老师的笔记

Appearance

15.Vue路由 ​

15.1.Vue路由基础 ​

Vue属于单页应用（SPA），即整个应用程序中只有一个html页面。

在单页应用中（SPA），由于只是更改DOM来模拟多页面，所以页面浏览历史记录的功能就丧失了。此时，就需要前端路由来实现浏览历史记录的功能。

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="./js/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>

注意：

上面代码中，router-link标签默认会被渲染成一个a标签

img

路由重定向：上面代码中，我们应该设置打开浏览器就默认调整到 “首页”，所以需要把根路由/重定向到/home。 修改路由配置：

javascript
// 2. 定义路由规则对象（每个路由应该映射一个组件）
const routes = [
    {
        path: '/',            //根路由
        redirect: '/home'     //把根路由重定向到home
    },{
        path: '/home',
        component: Home
    },{
        path: '/news',
        component: News
    }
]

15.2.嵌套路由 ​

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

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="./js/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>在英国旅游坐巴士，“return ticket”真..</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>

15.3 路由重定向 ​

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="./js/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>在英国旅游坐巴士，“return ticket”真..</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>

15.4.路由传参 ​

路由传参有多种方式，这里我们学习两种：params与query。

15.4.1.params形式传参 ​

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="./js/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>

注意：

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

15.4.2.query形式传参 ​

html
<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>,首页</div>'
    }
    const News = {
        template: `<div>新闻;  
                        参数1：； 
                        参数2：
                    </div>`
    }

    const routes = [{
        path: '/home',
        component: Home
    }, {
        path: '/news',
        component: News
    }]

    const router = new VueRouter({
        routes
    })

    var vm = new Vue({
        el: '#app',
        data: {
            id:1,
            name:'zhangsan'
        },
        router
    })
</script>

注意：

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

15.4.3.params方式与query方式的区别 ​

query方式传值：

img

params方式传值：

img

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

  1. query方式：

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

    利用路由规则中的path跳转。

  2. params方式：

    类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。

    利用路由规则中的name跳转。

15.4.4 完整代码 ​

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="./js/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="{path:'/home',query:{msg:'query的形式参数'}}">首页</router-link>
				
				<router-link :to="{name:'News',params:{msg:'国内'}}">国内</router-link>
				
			</p>

			<router-view></router-view>
		</div>


		<script>
			const Home = {
				template: '<div>首页: {{this.$route.query.msg}}</div>'
			}

			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: '/home',
					name: 'Home',
					component: Home,
				},
				{
				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>

Released under the MIT License.

Copyright © 2024-present 金山老师