网站首页 > 技术文章正文

前端基础面试:router路由导航的两种方式:声明式和编程式

ins518 2024-09-30 21:20:20 技术文章 18 ℃ 0 评论

这是Vue官方插件https://router.vuejs.org/zh/guide/#html。

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

简单举例子：

声明式路由：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
 <div id="app">
 <h1>Hello App!</h1>
 <p>
 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>
 </p>
 <router-view></router-view>
 </div>
 <script type="text/javascript">
 const Foo = Vue.extend({ template: '<div>foo</div>' })
 const Home = Vue.extend({ template:'<div>没有点击link时，默认的页面</div>'})
 const Bar = {
 template: '<div @click="luyou">bar</div>',
 methods: {
 luyou() {
 console.log(this.$route)
 }
 }
 }
 const routeses = [{path:'',component:Home},
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
 ]
 const router11 = new VueRouter({
 routes: routeses
 })
 const app = new Vue({
 el: '#app',
 router: router11,
 mounted() {
 // this.$router.push('/')
 console.log(this.$router)
 console.log(this.$route)
 }
 })
 </script>
</body>
</html>

编程式路由：

怎么把声明式改为编程式：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>编程式导航</title>
 <script src="https://cdn.bootcss.com/vue/2.6.9/vue.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
 <style>
 button,
 .router-link{
 padding: 10px 15px;
 border: none;
 outline: none;
 font-size: 20px;
 color: #fff;
 background: linear-gradient(to right, blue, red, green);
 background-color: #000;
 }
 </style>
</head>
<body>
 <div id="app">
 <!--最初的 router-link 模式-->
 <router-link class="router-link" to="/path/RouterLink">原始路由</router-link>
 <!--使用 router.push 方法-->
 <button type="button" @click="routerPush">router.push 方法</button>
 <!--使用 router.replace 方法-->
 <button type="button" @click="routerReplace">router.replace 方法</button>
 <!--使用 router.go 方法-->
 <button type="button" @click="routerGo">router.go 方法</button>
 <router-view></router-view>
 </div>
 <script>
 // 创建一个路由组件 用于输出内容 
 const view = {
 template: "<div>" +
 "<h1>我点击的是 {{$route.params.msg}}</h1>" +
 "</div>"
 }; 
 // 定义路由
 const routes = [{
 path: '/path/:msg',
 component: view
 }];
 // 创建路由实例
 const router = new VueRouter({
 routes
 });
 const app = new Vue({
 router,
 methods: {
 // 使用 router.push 替换 <router-link to="xxx"></router-link> 
 // 可点击浏览器后退按钮后退至上一步
 routerPush() {
 this.$router.push({
 path: "/path/routerPush"
 })
 },
 // 使用 router.replace 替换 <router-link to="xxx"></router-link>
 // 不可后退 
 routerReplace() {
 this.$router.replace({
 path: "/path/routerReplace"
 })
 },
 // router.go(n),接收一个整数，如果为正数则 前进 n 步，负则后退 n 步
 routerGo() {
 this.$router.go(-1)
 }
 }
 }).$mount("#app");
 </script>
</body>
</html>

这两个简单的案例搞懂了，也就懂了一点基础了。

欢迎关注

上一篇：「前端Vue学习系列」二、Vue基础篇
下一篇：实施微前端的路由分发式微前端微前端的原理

网站首页 > 技术文章正文

前端基础面试:router路由导航的两种方式:声明式和编程式

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 技术文章 正文

前端基础面试:router路由导航的两种方式:声明式和编程式

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 技术文章正文

取消回复欢迎你发表评论: