我有一个列表/详细用例,用户可以双击产品列表中的项目,转到详细信息屏幕进行编辑,然后在完成后返回列表屏幕.我已经使用这里描述的动态组件技术完成了这项工作:https://vuejs.org/v2/guide/components.html#Dynamic-Components.但是现在我打算在应用程序的其他地方使用vue-router,我想重构它以使用路由.使用我的动态组件技术,我使用keep-alive来确保当用户切换回列表视图时,存在与编辑之前相同的选择.但在我看来,通过路由,产品列表组件将被重新渲染,这不是我想要的.
现在,看起来路由器视图可以包含在keep-alive中,这可以解决一个问题,但会引入很多其他问题,因为我只希望该路由保持活动,而不是全部(并且目前我只是使用了单顶级路由器 - 视图).Vue 2.1通过引入router-view的include和exclude参数,显然已经做了一些事情来解决这个问题.但我也不想这样做,因为在我的主页面中预先声明应该或不应该使用keep-alive的所有路线似乎非常笨拙.在我正在配置路由时(即路径数组中)声明我是否需要保持活动状态会更加简洁.那么我最好的选择是什么？
我希望在用户导航到根路径时默认为特定页面,即当使用时转到myapp.com我想将它们重定向到myapp.com/defaultpage
我目前的代码是
index.js
import Full from '../containers/Full'
import DefaultView from '../views/DefaultView'
export default new Router({
mode: 'history',
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
redirect: '/defaultview',
name: 'home',
component: Full,
children: [
{
path: '/defaultview',
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
}
]})
因为当用户访问myapp.com时,我得到了"找不到404页面" - 即NotFoundComponent.只有当我输入myapp.com/defaultview时,我才能进入正确的页面.
有任何想法吗？
我正在使用Nuxt.js来构建静态网站.
如何在组件script代码中访问当前显示的路由名称(我想避免从浏览器位置读取直接URL)？
我可以以某种方式访问$route.name？
注意:我们可以编写vue.js大型应用程序,而无需使用任何编译器代码,如目前我看到所有示例现在使用webpack使vue.js代码兼容浏览器.
我想使vue.js应用程序,而webpack和不使用.vue扩展.可能吗？如果可能,您是否可以提供链接或提供示例如何在这种情况下使用路由.
因为我们在.vue扩展中制作组件可以在.js扩展中使用组件并使用应用程序,就像我们在角度1中所做的那样我们可以制作整个应用程序而无需任何转换器来转换代码.
可以在html,css,js文件中完成,而且没有webpack的东西.
我做了什么 . index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vueapp01</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js 此文件在webpack加载时添加
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = …新的Vue.js 3.0插件架构很不错,但似乎缺少一个路由器插件.如果我在第一次创建项目时选择不安装路由(vue create my-project),我希望以后可以改变主意并添加类似的路由vue add @vue/router,但该插件似乎不存在.事后是否有办法从CLI添加路由？
使用Vue路由器时,/foo/:val您需要添加一个观察器以响应参数更改.这导致在URL中具有参数的所有视图中有些恼人的重复代码.
这可能类似于以下示例:
export default {
// [...]
created() {
doSomething.call(this);
},
watch: {
'$route' () {
doSomething.call(this);
}
},
}
function doSomething() {
// e.g. request API, assign view properties, ...
}
有没有其他方法可以克服这个问题？可以将处理程序created和$route更改结合起来吗？是否可以禁用组件的重用,以便根本不需要观察者？我正在使用Vue 2,但这对Vue 1来说也许很有趣.
当滚动到新路径的顶部是即时的时,我有一个页面转换不能很好地工作.我想在它自动滚动到顶部之前等待100ms.以下代码根本不会滚动.有没有办法做到这一点？
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
}
],
scrollBehavior (to, from, savedPosition) {
setTimeout(() => {
return { x: 0, y: 0 }
}, 100);
}
})
如果keep-alive被指定为router-view,如下所示
<keep-alive>
<router-view></router-view>
</keep-alive>
然后,当重新访问该路由时,所有路由都被有效地缓存和重新加载.
我希望能够在各个路线上指定保持活动选项.
对于许多路由并且只需要保留1或2个路由而不重新渲染缓存所有路由都是无用的
有没有这样做的方法或任何可用的解决方法
我尝试使用router.go,router.push,router.replace和window.location.href去'www.mytargeturl.org'来重定向我的vuejs应用程序,但我总是得到myVueapp.com/www.mytargeturl.org这是我的路线:
routes:[
{path: '/', component: App,
children:[
{
path: 'detail',
component: ItemDetail,
props: true
},
{
path: 'search',
component: Middle
}
]
},
{
path: '/test', component: Test
},
{ path: '/a', redirect: 'www.mytargeturl.org' } // also tried this but didnt work
]
假设有两个子域为一个 nuxt 实例工作。他们应该有不同的页面结构。例如它可以是：
pages/
index.vue // technical entry point that has some logic for determining what routes subtree should be used
subdomain1/
index.vue // entry point for subdomain1.mysite.com/
page1.vue // entry point for subdomain1.mysite.com/page1
subdomain2/
index.vue // entry point for subdomain2.mysite.com/
page1.vue // entry point for subdomain2.mysite.com/page1
page2.vue // entry point for subdomain2.mysite.com/page2
文件夹结构可以不同。目标是能够为不同的子域加载不同的页面。subdomain1.mysite.com/page1必须加载一个文件（例如pages/subdomain1/page1.vue），而subdomain2.mysite.com/page1必须加载另一个文件（例如pages/subdomain2/page2.vue）。
我们可以使用nuxtServerInitaction 来确定子域，所以有一些this.$store.state.ux.subdomain变量是 eiter subdomain1 或 subdomain2。但其余的我不清楚。
是否可以在 nuxt.js 中实现？如果是这样，我想我们应该使用命名视图<nuxt-child :name="subdomain"/>，并extendRoutes以某种方式在nuxt.config.js，但我没能实现它为止。任何帮助，将不胜感激。