在使用Vue.js構建單頁應用程序時，使用vue addroutes添加新路由應該是一個常見的任務。但是，有時會發現新添加的路由在瀏覽器中無效，盡管它們在Vue.js應用程序中本地工作。

這種情況可能發生在以下情況下：

1. 沒有在Vue.js路由對象中指定mode選項，而實際上需要設置它才能在瀏覽器中使路由生效。例如，使用“history”模式需要設置mode：“history”。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
import Login from '../views/Login.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard
},
{
path: '/login',
name: 'Login',
component: Login
}
];
const router = new VueRouter({
routes,
mode: 'history' // 設置mode選項
});
export default router;

2. 在使用vue addroutes操作時，新添加的路由可能會被未預計的錯誤代碼所影響，例如對原有路由進行錯誤的操作。這種情況可以通過檢查路由操作的語句來檢測和修復，確保在路由操作時使用正確的語法和api。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
import Login from '../views/Login.vue';
Vue.use(VueRouter);
const defaultRoutes = [
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard
},
{
path: '/login',
name: 'Login',
component: Login
}
];
const router = new VueRouter({
routes: defaultRoutes,
mode: 'history'
});
// 新增路由
router.addroutes([
{
path: '/about',
name: 'About',
component: () =>import('../views/About.vue') // 使用正確的語法和api
}
]);
export default router;

總之，如果在使用Vue.js應用程序時遇到路由無效的問題，請考慮上述兩種可能的原因并嘗試相應的解決方案。