网站导航
> 文章列表 > Vue Router使用示例

Vue Router使用示例

网友: 文章列表 2024-03-21 16:51:58

Vue Router使用示例

一、认识路由

1、锚点的概念

案例：百度百科
特点：单页Web应用，预先加载页面内容
形式：url#锚点

2、路由的作用

Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）

3、路由的机制

路由包括路由和转发。
路由器 -> 公网IP -> 映射表 -> 内网IP
映射表：[内网ip1:电脑标识1，内网ip2:电脑标识2]

4、参考文档

https://router.vuejs.org/zh/

二、当作锚点的路由实例

1、创建文件夹和文件

创建文件夹 router，创建index.html

2、复制js资源到文件夹中

vue.js
vue-router.js

3、在index.html页面引入js

4、编写html，指定要跳转的路径

<div id="app"><h1>Hello App!</h1><p><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><!-- 通过传入 `to` 属性指定链接. --><router-link to="/">首页</router-link><router-link to="/invest">我要投资</router-link><router-link to="/user">用户中心</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</div>

5、编写js

  1. 定义（路由）组件。
  2. 定义路由
  3. 创建 router 实例，然后传 routes 配置
  4. 创建和挂载根实例。
<script>// 1. 定义（路由）组件。// 复杂的组件也可以从独立的vue文件中引入const welcome = { template: '<div>尚融宝主页</div>' }const invest = { template: '<div>投资产品</div>' }const user = { template: '<div>用户信息</div>' }// 2. 定义路由// 每个路由应该映射一个组件。const routes = [{ path: '/', redirect: '/welcome' }, //设置默认指向的路径{ path: '/welcome', component: welcome },{ path: '/invest', component: invest },{ path: '/user', component: user },]// 3. 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({routes, // （缩写）相当于 routes: routes})// 4. 创建和挂载根实例。// 从而让整个应用都有路由功能new Vue({el: '#app',router,})// 现在，应用已经启动了！
</script>

6、效果展示

Vue Router使用示例

三、页面间路由实例

1、安装router ：

npm install vue-router --save

2、App.vue跳转首页与关于页面

<template><div id="app"><router-link to="/home" >首页</router-link><router-link to="/about">关于</router-link><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script>

3、定义组件Home.vue

<template><div><h2>我是首页</h2><p>我是首页内容, 哈哈哈</p></div>
</template><script>export default {name: "Home"}
</script><style scoped></style>

4、定义组件About.vue

<template><div><h2>我是关于</h2><p>我是关于内容, 呵呵呵</p></div>
</template><script>export default {name: "About"}
</script><style scoped></style>

5、 在main.js中引入router，并绑定router

mport Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = falsenew Vue({el: '#app',router,render: h => h(App)
})

6、在index.js中定义路由

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'import Home from '../components/Home'
import About from '../components/About'// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)// 2.创建VueRouter对象
const routes = [{path: '',// redirect重定向redirect: '/home'},{path: '/home',component: Home},{path: '/about',component: About}
]
const router = new VueRouter({// 配置路由和组件之间的应用关系routes,mode: 'history',linkActiveClass: 'active'
})// 3.将router对象传入到Vue实例
export default router

7、浏览器展示效果

Vue Router使用示例

网络标签：

相关问题