Vue路由使用

概述

路由是以插件的形式引入到我们的vue项目中来的

vue-router是vue的核心插件

1:创建路由对象 `var router = new VueRouter();

2:配置路由规则 `router.addRoutes([路由对象]);

路由对象`{path:'锚点值',component:要(填坑)显示的组件}`

3:将配置好的路由对象交给Vue

    - ##### 在options中传递-> key叫做 router

4:留坑(使用组件) `<router-view></router-view>`

代码


       var Login={

           template:`

              <div>我是登录页面</div>

           `,

       }

       //安装路由插件

       Vue.use(VueRouter);

       //创建路由对象

      var router= new VueRouter({

         //配置路由对象

         routes:[

            {path:'/login',name:'login',component:Login}

         ]

      })

       new Vue({

           el:'#app',

           router,

           template:`

              <div>

                  <p>请在链接上加上login测试路由功能</p>

                  <router-view></router-view>

              </div>

           `,

           data(){

              return {}

           },

       })
<!DOCTYPE html>

<html>

<head>

    <title>路由的安装和使用</title>

</head>

<body>

    <div id="app">

      

    </div>



    <script type="text/javascript" src="vue.js"></script>

    <!-- 引入路由插件 -->

    <script type="text/javascript" src="vue-router.js"></script>

    <script type="text/javascript">

       var Login={

           template:`

              <div>我是登录页面</div>

           `,

       }

       //安装路由插件

       Vue.use(VueRouter);

       //创建路由对象

       var router= new VueRouter({

           //配置路由对象

           routes:[

              {path:'/login',name:'login',component:Login}

           ]

       })

       new Vue({

           el:'#app',

           router,

           template:`

              <div>

                  <p>请在链接上加上login测试路由功能</p>

                  <router-view></router-view>

              </div>

           `,

           data(){

              return {}

           },

       })

    </script>

</body>

</html>

 

运行效果

 

### 配置和使用 Vue 路由 Vue Router 是 Vue.js 的官方路由管理器,它允许开发者通过定义不同的路径来导航到应用的不同部分。以下是关于如何在 Vue 应用程序中配置和使用路由的详细介绍。 #### 安装 Vue Router 要开始使用 Vue Router,首先需要安装该库。可以通过 npm 或 yarn 来完成这一操作[^1]: ```bash npm install vue-router@next --save ``` 或者如果使用的是 Yarn,则可以运行以下命令: ```bash yarn add vue-router@next ``` #### 创建路由实例并设置路由映射 创建一个 `router/index.js` 文件,在其中初始化路由器,并定义组件之间的映射关系。下面是一个简单的例子[^2]: ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; // 假设有一个名为Home的视图组件 import About from '../views/About.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router; ``` 上述代码片段展示了如何导入必要的模块以及自定义路径与组件的关系。 #### 将路由集成至主应用程序文件 接着,在项目的入口文件(通常是 `main.js`),引入刚刚创建好的路由对象并将它传递给 Vue 实例[^3]: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就完成了基本的路由配置工作流程。 #### 动态路由匹配与嵌套路由支持 除了基础功能外,Vue Router 还提供了动态参数解析、重定向等功能。例如,当访问 `/user/:id` 形式的 URL 时,我们可以捕获 id 参数用于加载特定用户的资料页面[^4]。 另外还可以实现更复杂的场景比如子级路由结构等特性,这使得构建大型单页应用成为可能。 ```javascript { path: '/user/:id', component: User, children:[ {path:'profile',component:UserProfile}, {path:'posts',component:UserPosts} ] } ``` 以上就是有关于 Vue 中配置和使用路由的一个概括说明。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值