Vue项目设置默认打开某一个路由

最新推荐文章于 2024-06-11 17:08:06 发布
最新推荐文章于 2024-06-11 17:08:06 发布
阅读量1.7w 收藏 5
点赞数 8
分类专栏： Vue相关 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/for_weber/article/details/80664970
版权

    Vue项目打包自启动浏览器后一般会打开 http://localhost:8080/#/

    因为没有设置默认需要打开的路由，因此路由没有重定向。

    解决办法很简单，只需要在定义router的时候设置默认的路由就好。

   

    在routes数组（指第一层）添加一个新的json对象

{path: '*', redirect: '/根路由/指定路由'}

    重新打开页面就可以看到页面会自动打开到你设置的路由下。

    其实你是设置了若当前路由未匹配到则打开哪一个路由这一选项。因此，只要你浏览器的地址指向一个不存在路由，都会自动切换到这个redirect的值。

 


                

        

        

    




    

      

        

            

              
                
                  for_weber
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    8
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    5
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Vue ｒｏｕｔｅｒ 路由导航---根据用户角色进入项目不同的Router路径

				
			

			

				

					m0_37727198的博客
				

				

					02-20
					
					1203
					
				

			

		

		

			
				
1.知识点：vue router 生命周期：router.beforeEach， vue 项目初始目录main.js ，ES6 : promise 开发思想：在main.js 中，在vue 项目实例化之前，通过接口获取用户信息

2.vue　项目结合ｉｏｓ原生开发移动端项目，项目的登陆入口在ｉｏｓ　中；而ＰＣＷｅｂ项目登录页面在本项目中，可以登录后直接获取用户信息。所以移动端混合模式使用ｖｕｅ　开发，可以在ｍｉａｎ．ｊｓ中获取


// lzk获取用户信息
import { autoLogin } f...

			
		

	



                

              
                



	

		

			

				
					
vscode新建一个最简单的vue项目

				
			

			

				

					09-27
				

			

		

		

			
				
打开命令行工具，进入刚刚创建的`vue-test`目录，然后运行以下命令来初始化一个新的Vue项目：  ```bash vue create vue-test ```  这将启动Vue CLI（命令行界面），引导你选择项目配置。对于初学者，你可以选择...

			
		

	



                


  
              

                


	

		

			

				
					
Vue项目启动后跳转到制定路由页面

				
			

			

				

					见证自己学习,成长的记录
				

				

					01-29
					
					7531
					
				

			

		

		

			
				
Vue项目启动后跳转到制定路由页面

			
		

	





	

		

			

				
					
element默认选择路由

					
最新发布

				
			

			

				

					weixin_45859470的博客
				

				

					06-11
					
					260
					
				

			

		

		

			
				
【代码】element默认选择路由。

			
		

	



		

			
		



	

		

			

				
					
静态路由 | 动态路由 | 默认路由的配置方法

					
热门推荐

				
			

			

				

					@_囚徒-2018_的家园
				

				

					04-09
					
					1万+
					
				

			

		

		

			
				
1.静态路由、动态路由以及默认路由
       路由器中路由表中的路由记录可以有动态路由和静态路由两种。
       动态路由是根据路由协议自动计算生成的，而静态路由是由人工配置的。默认路由是静态路由中的一种，是由人工配置的，表示当一个路由转发请求在路由表中匹配不到路由规则时，被默认执行的路由策略。默认路由，也称为缺省路由或默认网关。
       动态路由可以自动寻找最优路径，邻居路由

			
		

	





	

		

			

				
					
vue 默认加载某一子路由

				
			

			

				

					衣乌安、随笔
				

				

					08-22
					
					8286
					
				

			

		

		

			
				
先来看一段路由的代码，要解决的问题是在进入页面或加载某一父级路由时默认加载其某一特定路由． 


routes: [
    {
      path: '/',
      name: 'wpIndex',
      component: wpIndex,
      redirect:'/login',
      children: [
        {
          path: ...

			
		

	





	

		

			

				
					
vue项目路由配置及两种路由跳转方法

				
			

			

				

					yezi__6的博客
				

				

					11-02
					
					3964
					
				

			

		

		

			
				
路由

1.Vue-rotuer开发（五步法）


1)新建router目录


通过npm安装vue-router

Npm install --save vue-router


2)在index.js中，导入路由，并且使用Vue.use()安装路由：



import Vue from 'vue'
import App from './App'
import VueRo...

			
		

	





	

		

			

				
					
vue设置一开始进入的页面教程

				
			

			

				

					10-16
				

			

		

		

			
				
在上述例子中，我们只设置了最基本的路由配置，即定义了一个名为`Login`的路由，其路径为根路径`/`，并将`Login`组件作为该路由的视图。在实际开发中，根据项目需求，你可能需要添加更多的路由规则来处理不同的页面...

			
		

	





	

		

			

				
					
vue2 设置router-view默认路径的实例

				
			

			

				

					12-01
				

			

		

		

			
				
一个简单的设置默认路由。 在vue的官方文档中，并没有对这个做出案例和解释，不知道是不是我没发现。反正这个问题算是遇到的小小的坑吧。原谅一个菜鸟，什么都不懂。 在察阅文章的过程中，发现有前辈总结了这个方面...

			
		

	





	

		

			

				
					
vue项目打包后打开页面空白解决办法

				
			

			

				

					08-27
				

			

		

		

			
				
要解决 Vue 项目打包后打开页面为空白的问题，需要检查 config 文件中的 index.js 文件，确保 build 模块导出的路径正确，并且检查路由配置文件中的模式设置。如果模式设置为 history 模式，需要在服务端添加一个...

			
		

	





	

		

			

				
					
详解vue路由篇(动态路由、路由嵌套)

				
			

			

				

					12-08
				

			

		

		

			
				
在主组件 `App.vue` 中，`<router-view>` 是一个特殊的组件，用于显示根据当前路由匹配到的组件。在 `router/index.js` 文件中配置路由，比如定义一个名为 `'HelloWorld'` 的路由，它的路径为 `'/'`，并关联到 `...

			
		

	





	

		

			

				
					
vue router跳转页面常用的几种方法

				
			

			

				

					songjuntao8的专栏
				

				

					01-11
					
					1万+
					
				

			

		

		

			
				
一、 router-link跳转


### 1.不带参数
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
// 注意：router-link中链接如果是'/'开始就是从根路由开始；如果不带'/'，则从当前路由开始。
 
###2.带params参数
<router-link :to="{name:'home', params: {id:1

			
		

	





	

		

			

				
					
在vue中设置默认路由

				
			

			

				

					weixin_46191846的博客
				

				

					09-18
					
					8500
					
				

			

		

		

			
				
在vue中设置默认的路由，即一进入页面就显示其中一个路由的内容，也就是设定重定向。
如下是设置默认路由的代码，即router文件夹下的index.js的内容：
import Vue from ‘vue’;
import Router from ‘vue-router’;
import seller from ‘@/componentsllerller’;
import ratings from ‘@/components/ratings/ratings’;
import goods from ‘@/comp

			
		

	





	

		

			

				
					
前端页面路由跳转方式详解

				
			

			

				

					实泽有之，无泽虚之
				

				

					03-30
					
					1万+
					
				

			

		

		

			
				
本文总结以下几种前端页面路由的跳转方式：1.navigate;2.window.open;3.document.getElementById("a标签id").click();4.routerLink。

			
		

	





	

		

			

				
					
vue项目中打包完成后如何外部链接打开项目中的某个路由页面？

				
			

			

				

					L_eiDigaga的博客
				

				

					10-21
					
					4016
					
				

			

		

		

			
				
vue项目开发打包完后 如何从外部链接跳转到项目中的某个路由页面？
因为vue是单页面应用，所以项目打包完后只有一个index.html文件，然后一切跳转都是有内置的路由来实现，但是当我们从外部链接跳转的时候，，好比这样要直接从外部跳转到paintList这个路由页面，可是这时候会报错404，提示找不到页面，因为你打包完后就只有index.html文件，并没有paintList.html这个文件，...

			
		

	





	

		

			

				
					
Vue路由跳转打开新窗口

				
			

			

				

					高电平的博客
				

				

					04-16
					
					2788
					
				

			

		

		

			
				
使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。因为某些原因，某个页面的加载需要很长时间。为了不让用户重新加载，再次等待很长时间，决定当从这个页面跳转其他页面时，打开一个新窗口。

			
		

	





	

		

			

				
					
vue路由history模式 部署到nginx服务器 直接访问路由/刷新 404

				
			

			

				

					LGDmar的博客
				

				

					05-14
					
					750
					
				

			

		

		

			
				
nginx.conf配置


location / {
  try_files $uri $uri/ /index.html;
}


			
		

	





	

		

			

				
					
Vue2.x第一个路由及实现页面切换效果

				
			

			

				

					学习使我快乐_玉祥
				

				

					08-14
					
					584
					
				

			

		

		

			
				
首先安装vue路由：

npm install vue-router

然后新建一个router.js文件，文件名随意，路由页面代码如下：


//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用page1页面
import page1  from './view/Test1.vue';
//引用page2页面
...

			
		

	





	

		

			

				
					
Vue中Router路由使用history模式发布后访问404

				
			

			

				

					句无声的博客
				

				

					01-28
					
					6201
					
				

			

		

		

			
				
使用webpack打包发布，网页不能正常访问，先看下路由配置


export default new Router({
  mode: 'history',
  base: '/putian/',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/ClusterManage',
      name: 'ClusterMana

			
		

	





	

		

			

				
					
提供vue完整代码，实现四个页面路由切换，并设置第一个页面为默认打开页面

				
			

			

				

					05-18
				

			

		

		

			
				
以下是一个简单的 Vue.js 应用程序，其中包含四个页面路由切换，并设置第一个页面为默认打开页面的完整代码：

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Vue Router Example</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>Vue Router Example</h1>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
      <router-link to="/faq">FAQ</router-link>
      <router-view></router-view>
    </div>
    <script>
      // Define components for each page
      const Home = { template: '<div>Home Page</div>' }
      const About = { template: '<div>About Page</div>' }
      const Contact = { template: '<div>Contact Page</div>' }
      const FAQ = { template: '<div>FAQ Page</div>' }

      // Define routes for each page
      const routes = [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/contact', component: Contact },
        { path: '/faq', component: FAQ }
      ]

      // Create a router instance and pass in the routes
      const router = new VueRouter({
        routes
      })

      // Create a Vue instance and mount the router
      const app = new Vue({
        router
      }).$mount('#app')
    </script>
  </body>
</html>
```

在此示例中，我们首先定义了四个组件，每个组件都将渲染为一个简单的 `<div>` 标签，显示页面的名称。

然后，我们定义了四个路由，每个路由都与一个组件相关联。我们将这些路由传递给 VueRouter 实例，并将该实例传递给 Vue 实例。

最后，我们创建一个 Vue 实例并将其挂载到页面上的 `<div id="app">` 元素上。Vue Router 将自动处理路由切换，因此我们只需在模板中使用 `<router-link>` 元素进行导航，并使用 `<router-view>` 元素来呈现当前路由的组件内容。

为了设置第一个页面作为默认打开页面，我们只需将其路由路径设置为根路径（'/'）。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值